How to use traversal function in jQuery-JS Tutorial-php.cn

jQuery traversal functions include methods for filtering, finding, and concatenating elements

Function Description

.add() Adds elements to the collection of matching elements.

.andSelf() Adds the previous set of elements on the stack to the current set.

.children() Gets all child elements of each element in the matching element set.

.closest() starts from the element itself, matches the upper elements step by step, and returns the first matching ancestor element.

.contents() Gets the child elements of each element in the set of matching elements, including text and comment nodes.

.each() iterates over a jQuery object, executing a function for each matching element.

.end() ends the most recent filtering operation in the current chain and returns the set of matching elements to the previous state.

.eq() Reduces the set of matching elements to a new element at the specified index.

.filter() Reduces the set of matching elements to new elements matching the selector or matching function return value.

.find() Gets the descendants of each element in the current matching element set, filtered by the selector.

.first() Reduces the set of matching elements to the first element in the set.

.has() Reduces the set of matching elements to a set containing the descendants of a specific element.

.is() checks the current set of matching elements based on the selector and returns true if there is at least one matching element.

.last() Reduces the set of matching elements to the last element in the set.

.map() passes each element in the current matching set to the function, producing a new jQuery object containing the return value.

.next() Gets the immediately adjacent sibling elements of each element in the matching element set.

.nextAll() Gets all sibling elements after each element in the matching element set, filtered by the selector (optional).

.nextUntil() Gets all sibling elements after each element until an element matching the selector is encountered.

.not() Removes elements from the set of matching elements.

.offsetParent() Gets the first parent element for positioning.

.parent() Gets the parent element of each element in the current set of matching elements, filtered by the selector (optional).

.parents() Gets the ancestor elements of each element in the current matching element set, filtered by the selector (optional).

.parentsUntil() Gets the ancestor elements of each element in the current set of matching elements until an element matching the selector is encountered.

.prev() Gets the immediately preceding sibling element of each element in the matching element set, filtered by the selector (optional).

.prevAll() Gets all sibling elements before each element in the matching element set, filtered by the selector (optional).

.prevUntil() Gets all sibling elements before each element until an element matching the selector is encountered.

.siblings() Gets the sibling elements of all elements in the matching element set, filtered by the selector (optional).

.slice() Reduces the set of matching elements to a subset of the specified range.

Usage of each

1. Each

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

Copy after login

in the array

2. Traverse the

<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

Copy after login

in the Dom element

3. Comparison between each and map

The following example is to obtain the ID value of each multi-box;

each method:

Define an empty array and add ID values to the array through the each method; finally, after converting the array into a string, alert the value;

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

Copy after login

map method:

Execute each :checkbox to return this.id; and automatically save these return values as jQuery objects, then use the get method to convert them into native javascript arrays, and then use the join method to convert them into strings , and finally alert this value;

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

Copy after login

When you need the value of an array, use the map method, which is very convenient.

4. Use each

in jquery to traverse the array, using both element index and content. (i is the index, n is the content)

The code is as follows:

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

Copy after login

Example the object, using both member names and variable contents. (i is the member name, n is the variable content)

The code is as follows:

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

Copy after login

Example of traversing the dom element, here an input form element is used as an example.

If you have such a piece of code in your dom

<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"/>

Copy after login

Then you use each as follows

The code is as follows:

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

Copy after login

5.each Find elements based on this

To achieve the effect, the word "reply" will only be displayed when the mouse passes over it

<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>

Copy after login

The JS code is as follows

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

Copy after login

To achieve the effect, Verify whether all the true and false questions have choices

<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>

Copy after login

js code

//验证单选题是否选中
    $("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();
      }
    })

Copy after login

6. Official explanation

The following is the official explanation:

jQuery.each(object, [callback])

Copy after login

Overview

General traversal method, which can be used to traverse objects and arrays.

Unlike the $().each() method that iterates over jQuery objects, this method can be used to iterate over any object. The callback function has two parameters: the first is the member of the object or the index of the array, and the second is the corresponding variable or content. If you need to exit the each loop, you can make the callback function return false, and other return values will be ignored.