comment voulez-vous obtenir une référence à un div externe en utilisant jquery

Question

si j'ai html

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

je veux changer le code html du div « tout » quand je clique sur le div « min »:

i ont essayé ci-dessous, mais il ne semble pas fonctionner.

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

Quelqu'un at-il des idées sur ce qui ne va pas ici?

Answer 1

Vous voulez parent, pas prev. Votre div.min est à l'intérieur, pas à côté de la div.whole. Alors:

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

---

2017 mise à jour: live a été dépréciée pendant des années et a finalement été retiré. Il est utilisé dans ce qui précède parce qu'il était dans le code d'origine de l'OP et ne fut pas le problème, mais juste pour être complet, la façon actuelle de faire est avec la signature de la délégation de on:

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

Notez que nous don « t besoin même le ready, puisque ce fait la délégation de l'événement sur document, donc il n'a pas à attendre. (Cela est vrai de la version live ci-dessus aussi bien.)

Answer 2

.prev()

sélectionnera les frères et sœurs précédentes, à savoir l'élément qui précède l'élément courant à le même niveau.
Vous recherchez .parent().

E.g.

<div id="parent"> 
    <div id="first"></div> 
    <div id="second"></div> 
</div> 

• $('#second').prev() sélectionnera #first.
• $('#second').parent() sélectionnera #parent.
• $('#first').next() sélectionnera #second.

Answer 3

Une autre façon de le faire serait le suivre

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