difficulté à naviguer les DOM jQuery

Question

J'ai le code suivant apparaissant plusieurs fois sur une page html (valeurs de texte diffèrent):

<div> 
<a href="1.html"> 
    <span class="e"> 
    <span class="1">stuff1</span> 
    <span class="2">stuff2</span> 
    <span class="3">stuff3</span> 
    </span> 
</a> 
<a class="click" href="2.html">link</a> 
</div> 

ce que je suis en train de faire est lorsque le lien « lien » est cliqué , génère un dialogue avec les valeurs de stuff1, stuff2 et stuff3. J'ai du mal à atteindre les valeurs des travées. Effectivement, ce que je veux, c'est prendre $ (this) et obtenir le texte de son grignotage seulement les enfants de la portée de l'enfant.

Merci! -Mala

Answer 1

Je vais avoir un peu de mal à comprendre ce que vous voulez dire, mais peut-être cela est-il:

$('.click').click(function() { 
    // using our parent as a base, look for any class='e' element, and get its children. 
    var $collection = $('.e > *', $(this).parent()); 
    var text = []; 
    $collection.each(function() { 
    // add the text within each span to an array 
    text.push($(this).text()); 
    }); 

    // show the text of the spans as a comma separated list 
    alert(text.join(', ')); 


}); 

La fonction .text() sur un objet jQuery retourne le texte à l'intérieur d'un span (ou tout autre élément).

Réponse au commentaire:

$('.e span', $(this).parent()) fonctionnerait aussi bien, tous les enfants .e > * sélectionne DIRECT d'un élément class='e'. Le deuxième argument de la fonction $ fonctionne comme une portée; il ne trouve que des éléments sous cet élément de base.

Il pourrait également être écrit $(this).parent().find('span span'). Le danger de simplement chercher "span" est qu'il correspondrait également à la portée externe - l'étendue extérieure $('.e', $(this).parent()).text() renverra le texte de tous les 3 éléments ensemble - qui peut effectivement être ce que vous voulez.

Answer 2

$(this).prev().children(".e").get(0).children() 

vous obtiendrez tous les enfants du premier enfant de la classe "e" de la précédente fratrie.

Vous pouvez également le faire sans jQuery, mais c'est un peu plus laid; Si vous avez une référence au nœud qui vous intéresse, vous recherchez .previousSibling.getElementsByTagName('span')[0].childNodes - qui est un tableau.