jQuery sélecteur

Question

J'ai ce code HTML:

<div class='com_box'> 
    <div class='com_box_c'> 
    <div class='com_box_info'> 
     <a id='quote'>quote</a> 
    </div> 
    </div> 
</div> 

Lorsque je clique dans un devis # je veux ajouter un textarea après '.com_box'.

Comment sélectionner la division externe? Voici mon travail sans essayer jusqu'à présent:

$('a#quote').click(
    function() { 
    var com_box = $(this).parent('div.com_box'); 
    com_box.after('<textarea>....</textarea>'); 
    } 
) 

Answer 1

Soit:

var com_box = $(this).closest("div.com_box"); 

ou

var com_box = $(this).parents("div.com_box:first"); 

Answer 2

Utilisez .closest()

Remplacer

var com_box = $(this).parent('div.com_box'); 

avec

var com_box = $(this).closest('div.com_box'); 


$('#quote').click(
    function() { 
    $(this).closest('div.com_box').after('<textarea>....</textarea>'); 
    } 
) 

Answer 3

Je ne pense pas que $(this).parent('div.com_box') retournera aucun résultat , comme parent seulement retournera les parents immédiats. Vous voulez probablement juste $('div.com_box') pour cela (ou).

Answer 4

Utilisez closest() comme .com_box est pas un parent direct de l'élément #quote:

$('a#quote').click(function() { 
    var com_box = $(this).closest('div.com_box'); 
    com_box.after('<textarea>....</textarea>'); 
}); 

L'utilisation $(this).parent().parent().parent() fonctionne également, mais c'est ce que closest() est pour. :)

Answer 5

$('#quote').bind('click' function() { 
    $(this).parent().parent().parent().prepend('<textarea></textarea>'); 
}); 

Answer 6

var com_box = $(this).parent('div.com_box');

ne fonctionnera pas, mais

var com_box = $(this).parents('div.com_box');

va fonctionner!

Prenez note que le terme pluriel est utilisé: parents.