Comment utiliser la fonction de traversée dans jQuery

Les fonctions de traversée jQuery incluent des méthodes pour filtrer, rechercher et concaténer des éléments

Description de la fonction

.add() Ajoute des éléments à l'ensemble des éléments correspondants.

.andSelf() Ajoute l'ensemble d'éléments précédent sur la pile à l'ensemble actuel.

.children() Obtient tous les éléments enfants de chaque élément dans l'ensemble des éléments correspondants.

.closest() part de l'élément lui-même, fait correspondre les éléments supérieurs étape par étape et renvoie le premier élément ancêtre correspondant.

.contents() Obtient les éléments enfants de chaque élément dans l'ensemble des éléments correspondants, y compris les nœuds de texte et de commentaires.

.each() parcourt un objet jQuery, exécutant une fonction pour chaque élément correspondant.

.end() termine l'opération de filtrage la plus récente de la chaîne actuelle et renvoie l'ensemble des éléments correspondants à l'état précédent.

.eq() Réduit l'ensemble des éléments correspondants à un nouvel élément à l'index spécifié.

.filter() réduit l'ensemble des éléments correspondants à de nouveaux éléments correspondant à la valeur de retour du sélecteur ou de la fonction correspondante.

.find() Obtient les descendants de chaque élément dans l'ensemble actuel d'éléments correspondants, filtrés par le sélecteur.

.first() Réduit l'ensemble des éléments correspondants au premier élément de l'ensemble.

.has() réduit l'ensemble des éléments correspondants à un ensemble contenant les descendants de l'élément spécifique.

.is() vérifie l'ensemble actuel d'éléments correspondants en fonction du sélecteur et renvoie true s'il y a au moins un élément correspondant.

.last() Réduit l'ensemble des éléments correspondants au dernier élément de l'ensemble.

.map() transmet chaque élément de l'ensemble correspondant actuel à la fonction, produisant un nouvel objet jQuery contenant la valeur de retour.

.next() Obtient les éléments frères immédiatement adjacents de chaque élément dans l'ensemble des éléments correspondants.

.nextAll() Obtient tous les éléments frères après chaque élément de l'ensemble d'éléments correspondant, filtrés par le sélecteur (facultatif).

.nextUntil() Obtient tous les éléments frères après chaque élément jusqu'à ce qu'un élément correspondant au sélecteur soit rencontré.

.not() Supprime un élément de l'ensemble des éléments correspondants.

.offsetParent() Obtient le premier élément parent pour le positionnement.

.parent() Obtient l'élément parent de chaque élément dans l'ensemble actuel d'éléments correspondants, filtré par le sélecteur (facultatif).

.parents() Obtient les éléments ancêtres de chaque élément dans l'ensemble actuel d'éléments correspondants, filtrés par le sélecteur (facultatif).

.parentsUntil() Obtient les éléments ancêtres de chaque élément dans l'ensemble actuel d'éléments correspondants jusqu'à ce qu'un élément correspondant au sélecteur soit rencontré.

.prev() Obtient l'élément frère immédiatement précédent de chaque élément de l'ensemble d'éléments correspondant, filtré par le sélecteur (facultatif).

.prevAll() Obtient tous les éléments frères avant chaque élément de l'ensemble d'éléments correspondant, filtrés par le sélecteur (facultatif).

.prevUntil() Obtient tous les éléments frères avant chaque élément jusqu'à ce qu'un élément correspondant au sélecteur soit rencontré.

.siblings() Obtient les éléments frères de tous les éléments de l'ensemble d'éléments correspondant, filtrés par le sélecteur (facultatif).

.slice() Réduit l'ensemble des éléments correspondants à un sous-ensemble de la plage spécifiée.

Utilisation de chacun

1 chacun dans le tableau

var arr = [ "one", "two", "three", "four"];   
 $.each(arr, function(){   
  alert(this);   
 });  //上面这个each输出的结果分别为：one,two,three,four  
  var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]   
$.each(arr1, function(i, item){   
  alert(item[0]);   });   //其实arr1为一个二维数组，item相当于取每一个一维数组，  //item[0]相对于取每一个一维数组里的第一个值  //所以上面这个each输出分别为：1  4  7   
 var obj = { one:1, two:2, three:3, four:4};   
$.each(obj, function(i) {   
  alert(obj[i]);      });  //这个each就有更厉害了，能循环每一个属性   //输出结果为：1  2 3 4

2. Traversée .

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $("li").each(function(){
   alert($(this).text())
  });
 });});</script></head><body><button>输出每个列表项的值</button><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body></html>
依次弹出Coffee，Milk，Soda

3. Comparaison entre chacun et la carte

L'exemple suivant consiste à obtenir la valeur ID de chaque multi-box

chaque ; méthode :

Définissez un tableau vide et ajoutez des valeurs d'ID au tableau via la méthode each ; enfin, après avoir converti le tableau en chaîne, alertez la valeur ; 🎜>

méthode map :

$(function(){
  var arr = [];
  $(":checkbox").each(function(index){
    arr.push(this.id);
  });
  var str = arr.join(",");
  alert(str);})

Exécutez chaque :checkbox pour renvoyer this.id et enregistrez automatiquement ces valeurs de retour​​en tant qu'objets jQuery, puis utilisez la méthode get pour les convertir. en tableaux javascript natifs, puis utilisez La méthode join la convertit en chaîne et alerte enfin la valeur

Lorsqu'une valeur de tableau est nécessaire, utilisez la méthode map, qui est très pratique.

$(function(){
  var str = $(":checkbox").map(function() {
    return this.id;
  }).get().join();  
  alert(str);})

4. Utilisez each

dans jquery pour parcourir le tableau, en utilisant à la fois l'index et le contenu des éléments. (i est l'index, n est le contenu) Le code est le suivant :

Exemple l'objet, en utilisant à la fois les noms de membres et le contenu des variables. (i est le nom du membre, n est le contenu de la variable)

Le code est le suivant :

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );});

Exemple de parcours de l'élément dom, ici un élément de formulaire de saisie est utilisé comme un exemple.

Si vous avez un morceau de code comme celui-ci dans votre domaine

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );});

alors vous utilisez chacun comme suit

Le code est le suivant :

<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>

5. Recherchez l'élément

$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值});

dans chacun en fonction de cela pour obtenir l'effet que le mot "réponse" ne sera affiché que lorsque la souris passera dessus

Le code JS est le suivant

<ol class="commentlist">
  <li class="comment">
    <div class="comment-body">
     <p>嗨，第一层评论</p>
     <div class="reply">
      <a href="#" class=".comment-reply-link">回复</a>
     </div>
    </div>
    <ul class="children">
     <li class="comment">
      <div class="comment-body">
      <p>第二层评论</p>
      <div class="reply">
       <a href="#" class=".comment-reply-link">回复</a>
      </div>
     </div></li>
    </ul>
  </li></ol>

Obtenir l'effet et vérifier si toutes les questions de jugement ont des choix

$("div.reply").hover(function(){
 $(this).find(".comment-reply-link").show();},function(){
 $(this).find(".comment-reply-link").hide();});

code js

<ul id="ulSingle">
      <li class="liStyle">
        1. 阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
        <!--begin选项-->
        <ul>  
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_0">A     </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
                <input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>    
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_1">B     </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
                <input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" 
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_2">C     </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
                <input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
            
        </ul>
        <!--end选项-->
        <br />
      </li>
    </ul>

6. Explication officielle

//验证单选题是否选中
    $("ul#ulSingle>li.liStyle").each(function (index) {
      //选项个数
      var count = $(this).find("ul>li>:checkbox").length;
      var selectedCount = 0
      for (var i = 0; i < count; i++) {
        if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
          selectedCount++;
          break;
        }
      }
      if (selectedCount == 0) {
        $(this).find("label#selectTips").show();
        return false;
      }
      else {
        $(this).find("label#selectTips").hide();
      }
    })

Ce qui suit est l'explication officielle :

Aperçu

Méthode d'itération générale, qui peut être utilisée pour itérer objets et tableaux.

jQuery.each(object, [callback])

Contrairement à la méthode $().each() qui parcourt les objets jQuery, cette méthode peut être utilisée pour parcourir n'importe quel objet. La fonction de rappel a deux paramètres : le premier est le membre de l'objet ou l'index du tableau, et le second est la variable ou le contenu correspondant. Si vous devez quitter chaque boucle, vous pouvez faire en sorte que la fonction de rappel renvoie false et les autres valeurs de retour seront ignorées.