jquery pour traverser la div et obtenir les détails de portée

Question

J'ai une page html comme ci-dessous:

<div id="test1"> 
    <table> 
     <tr> 
      <td><span id="234">ABKO</span></td> 
     </tr> 
     <tr> 
      <td><span id="1234">ABKO2</span></td> 
     </tr> 
     <tr> 
      <td><span id="2634">ABKO3</span></td> 
     </tr> 
    </table>  
</div> 
<div id="test2"> 
    <table> 
     <tr> 
      <td><span id="233">ABKOw</span></td> 
     </tr> 
     <tr> 
      <td><span id="1236">ABKOc</span></td> 
     </tr> 
     <tr> 
      <td><span id="2635">ABKOv</span></td> 
     </tr> 
    </table>  
</div> 

Comment puis-je obtenir tous les détails de portée entre l'utilisation de jQuery? par exemple, si je considère d'abord div = test1 alors je veux tous les soan avec leur carte d'identité et le texte comme div -> test1 Span => id 233 & & ABKO Span => id 1234 & & ABKO2 Span => id 22634 & & ABKO3

Answer 1

Vous pouvez parcourir tous les éléments <span> comme ceci:

$('div span').each(function(){ 
    var $span = $(this); 

    var divId = $span.closest('div').attr('id'); 
    var spanId = $span.attr('id'); 
    var spanTxt = $span.text() 

    // do something with the above 
}); 

Vous pouvez voir in action here. Cela consiste à créer une liste d'éléments d'étendue imbriqués dans un div (CSS selectordiv span). Il itère ensuite sur cette liste à l'aide de la méthode .each().

À l'intérieur de chaque itération, $(this) fait référence à l'élément de plage correspondant. Nous capturons une référence dans la variable $span afin de ne pas continuer à recréer le même objet jQuery. Nous utilisons ensuite la méthode .closest() pour trouver le premier ancêtre du span qui correspond au sélecteur donné (div). Cela obtient notre div parent.

Enfin .attr() et .text() obtient l'attribut ID et les valeurs de texte.

Answer 2

Vous pouvez trouver un élément par ID avec quelque chose comme $('#test1'). Vous pouvez trouver des éléments par étiquette avec $('span') ou $('div').

Si vous voulez trouver toutes les travées appartenant à "test1":

$('#test1').find('span')

ou

$('#test1 span')

Vous pouvez itérer sur une collection d'éléments avec each():

$('#test1').find('span').each(function() { 
    var id = this.id; 
    var value = $(this).html(); 
    // do whatever... 
}); 

J'espère que vous pourrez travailler le reste vous-même.