views:

122

answers:

3

if i have this html

<div class="whole">This is a <div class="min">Test</div></div>

i want to change the html of the "whole" div when i click on the "min" div:

i have tried this below, but it doesn't seem to work.

$(document).ready(function() {
    $('div.min').live('click', function() {
         $(this).prev('.whole').html("<img  BORDER=0 src='../../images/copy1.png' />");
    });
});

does anyone have any ideas on whats going wrong here ?

+3  A: 

You want parent, not prev. Your div.min is inside, not next to, the div.whole. So:

$(document).ready(function() {
    $('div.min').live('click', function() {
         $(this).parent('.whole').html("<img  BORDER=0 src='../../images/copy1.png' />");
    });
});
T.J. Crowder
+3  A: 

.prev() will select the preceding sibling, i.e. the element that precedes the current element at the same level.
You are looking for .parent().

E.g.

<div id="parent">
    <div id="first"></div>
    <div id="second"></div>
</div>
  • $('#second').prev() will select #first.
  • $('#second').parent() will select #parent.
  • $('#first').next() will select #second.
Felix Kling
A: 

Another way of doing this would be the follow

$('div.min').click(function(event){
   if ($(event.target).is('div.min')){
        $('div.whole').html("<img  BORDER=0 src='../../images/copy1.png' />");
        }
});​
fabio