Analysis of jquery traversal function, each traversal _jquery in JavaScript

JQuery traversal function

The JQuery traversal function includes methods for filtering, locating, and concatenating elements.

function	Description
. Add ()	Adds an element to the collection of matching elements.
. Andself ()	Adds the set of elements before the stack to the current collection.
. Children ()	Gets all the child elements of each element in the matching element collection.
. Closest ()	Starts with the element itself, recursively matches the ancestor element, and returns the first matching ancestral element.
. Contents ()	Gets the child elements of each element in the matching element collection, including text and annotation nodes.
. each ()	Iterate over the JQuery object, executing the function for each matching element.
. End ()	Ends the most recent filter operation in the current chain and returns a collection of matching elements back to the previous state.
. EQ ()	Reduces the collection of matching elements to the new element at the specified index.
. Filter ()	Reduces the collection of matching elements to a new element that matches the return value of a selector or matching function.
. Find ()	Gets the descendants of each element in the current matching element collection, filtered by the selector.
. A ()	Reduces the collection of matching elements to the first element in the collection.
. has ()	Reduces the collection of matching elements to a collection of descendants that contain specific elements.
. is ()	Checks the collection of current matching elements according to the selector, and returns True if there is at least one matching element.
. Last ()	Reduces the collection of matching elements to the last element in the collection.
. Map ()	Passes each element in the current matching collection to a function, generating a new JQuery object that contains the returned value.
. Next ()	Gets the sibling elements that are adjacent to each element in the matching element collection.
. Nextall ()	Gets all sibling elements after each element in the collection of elements, which is filtered by the selector (optional).
. Nextuntil ()	Gets all sibling elements after each element until the element that matches the selector is encountered.
. Not ()	Deletes an element from the collection of matching elements.
. offsetparent ()	Gets the first parent element to use for positioning.
. Parent ()	Gets the parent element of each element in the current matching element collection, optionally filtered by the selector.
. Parents ()	Gets the ancestor element of each element in the current matching element collection, optionally filtered by the selector.
. Parentsuntil ()	Gets the ancestor element of each element in the current matching element collection until the element that matches the selector is encountered.
. Prev ()	Gets the first sibling element next to each element in the matching element collection, filtered by selector (optional).
. Prevall ()	Gets all sibling elements before each element in the matching element collection, which is filtered by the selector (optional).
. Prevuntil ()	Gets all the sibling elements before each element until the element that matches the selector is encountered.
. Siblings ()	Gets the sibling element of all elements in the matching element collection, which is filtered by the selector (optional).
. Slice ()	Reduces the set of matching elements to a subset of the specified range.

The use of each

1. Each of the array

 var arr = ["One", "two", "three", "four"];   
 $.each (arr, function () {   
  alert (this);   
 });  
The results of each output above are: One,two,three,four  
  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 9]]   
$.each (arr1, function (i, item) {   
  alert (item[0]);   
In fact arr1 is a two-dimensional array, the item is equivalent to take each one-dimensional array,  
//item[0] relative to the first value in each one-dimensional array  
//So the above each output is: 1  4  7   
 
 
var obj = {one:1, two:2, Three:3, four:4};   
$.each (obj, function (i) {   
  alert (obj[i]);      
});  
This each has more powerful, can cycle each attribute   
//output result is: 1  2 3 4

2. Traversing the DOM element

Pop-up Coffee,milk,soda in turn

Comparison of 3.each and map

The following example is to get the ID value of each multiple box;

Each method:

Defines an empty array, adds an ID value to the array by each method, and finally converts the array to a string, alert this value;

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

Map method:

Performs a return this.id for each: CheckBox and returns these values automatically to the jquery object, then converts it to a native JavaScript array using the Get method, and then converts it to a string with the Join method, with the last alert value;

$ (function () {
  var str = $ (": CheckBox"). Map (function () {return
    this.id;
  }). Get (). Join ();  
  alert (str);
})

It is convenient to use the map method when the value of an array is needed.

Use each in 4.jquery

An array of examples, using both element indexes and content. (i is index, n is content)

The code is as follows:

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

The instance object, with the member name and variable content. (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");

Example of a DOM element, where an input form element is used as an example.

If you have a section of this code in the DOM

<input name= "AAA" type= "hidden" value= "a"/>

<input name= "BBB" type= "hidden" value= "222"/>

<input name= "CCC" type= "hidden" value= "333"/>

<input name= "ddd" type= "hidden" value= "444"/>

Then you use each of the following

The code is as follows:

$.each ($ ("Input:hidden"), function (i,val) {
alert (val);//Output [object Htmlinputelement] because it is a form element.
alert (i);//Output index is 0,1,2,3
alert (val.name);//output name of Value
alert (val.value);//output value of value
});

5.each find elements based on this

Implementation effect "Reply" Two words only appear when the mouse passes

<ol class= "Commentlist" >
  <li class= "comment" >
    <div class= "Comment-body" >
     <p> Hi , First floor review </p>
     <div class= "Reply" >
      <a href= "#" class= "Comment-reply-link" > Reply </a>
     </div>
    </div>
    <ul class= "Children" >
     <li class= "comment" >
      <div class= "Comment-body" >
      <p> Second Floor review </p>
      <div class= "Reply" >
       <a href= "#" class= " . comment-reply-link "> Reply </a>
      </div>
     </div></li>
    </ul>
  < /li>
</ol>

JS code is as follows

$ ("div.reply"). Hover (function () {
 $ (this). Find (". Comment-reply-link"). Show ();
},function () {
 $ ( This). Find (". Comment-reply-link"). Hide ();
});

To achieve the results, verify that the decision questions have a choice

Html

<ul id= "Ulsingle" > <li class= "Listyle" > 1.   Aston on time <label id= "Selecttips" style= "
          
              Display:none "class=" filltims "> Please select </label> <!--begin option--> <ul> <li class= "LiStyle2" > <span id= "repsingle_repsinglechoices_0_laboption_0" >a </span& gt;. Assad issued <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 "Nam E= "Repsingle$ctl00$repsinglechoices$ctl00$chesinglechoice"/></li> <li class= "LiSty" Le2 "> <span id=" repsingle_repsinglechoices_0_laboption_1 ">b </span> Assad <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> <li class=" LiStyle2 "> <span id=" RepS Ingle_repsinglechoices_0_laboption_2 ">c </span> Aston <input type=" hidden "name=" repsingle$ctl00$ Repsinglechoices$ctl02$hidid "id=" Repsingle_repsinglechoices_0_hidid_2 "value=" 3 "/> <input id=" RepS Ingle_repsinglechoices_0_chesinglechoice_2 "type=" checkbox "Name=" repsingle$ctl00$repsinglechoices$ctl02$ Chesinglechoice "/></li> </ul> <!--end option--> <br/> & Lt;/li> </ul>

JS Code

Verify that the single topic selection is
    $ ("Ul#ulsingle>li.listyle"). each (function (index) {
      //Option number
      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 ();
      }
    )

PS: Legend of attr ("property", "value"), in some browsers can be used regardless of prop, if only judge can use $ (this). Find ("Ul>li>:checkbox:eq (" + i + ")"). : Checked ");

6. Official Explanations

The following is an official explanation:

Jquery.each (object, [callback])

Overview

A universal example method, which can be used for example objects and arrays.

Unlike the $ (). each () method of the JQuery object, this method can be used to sample any object. The callback function has two parameters: the first is the index of the member or array of the object, and the second is the corresponding variable or content. If you need to exit each loop so that the callback function returns false, the other return values are ignored.

Parameters

Objectobject

An object or array that needs to be repeated.

Callback (optional) Function

The callback function that each member/element executes.

The above analysis of jquery traversal function, JavaScript in each traversal is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud-dwelling community.