Each traversal in JavaScript

JQuery traversal function

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

function	Description
. Add ()	Adds an element to the collection of matching elements.
. Andself ()	Adds the previous set of elements in the stack to the current collection.
. Children ()	Gets all the child elements of each element in the matching element collection.
. Closest ()	Starting with the element itself, it is progressively matched to the ancestor element and returns the first matching ancestor element.
. Contents ()	Gets the child elements of each element in the matching element collection, including the text and comment nodes.
. each ()	Iterates over the JQuery object and executes the function for each matching element.
. End ()	Ends the most recent filter operation in the current chain and returns a collection of matching elements to the previous state.
. EQ ()	Reduces the collection of matching elements to a new element at the specified index.
. Filter ()	Reduces the set of matching elements to a new element that matches the selector or the return value of the matching function.
. Find ()	Gets the descendants of each element in the current matching element collection, filtered by the selector.
. First ()	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 a particular element.
. is ()	Checks the current set of matching elements based on the selector, and returns true if at least one of the matching elements exists.
. Last ()	Reduces the collection of matching elements to the last element in the collection.
. Map ()	Passes each element in the current matching collection to the function, producing a new JQuery object that contains the return value.
. Next ()	Gets the sibling element adjacent to each element in the matching element collection.
. Nextall ()	Gets all the sibling elements after each element in the matching element collection, optionally filtered by selectors.
. Nextuntil ()	Get all the sibling elements after each element until you encounter the element that matches the selector.
. Not ()	Removes an element from the collection of matching elements.
. OffsetParent ()	Gets the first parent element used for positioning.
. Parent ()	Gets the parent element of each element of 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 it encounters an element that matches the selector.
. Prev ()	Gets the previous sibling element immediately adjacent to each element in the matching element collection, optionally filtered by the selector.
. Prevall ()	Gets all sibling elements before each element in the matching element collection, optionally filtered by selectors.
. Prevuntil ()	Get all of the sibling elements before each element until you encounter the element that matches the selector.
. Siblings ()	Gets the sibling elements of all elements in the matching element collection, optionally filtered by the selector.
. Slice ()	Reduces the collection of matching elements to a subset of the specified range.

Usage of each

1. Each in the array

Copy code var arr = ["One", "one", "three", "four"];      $.each (arr, function () {         alert (this);      });   The results for each of the above outputs 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, item is equivalent to take each one-dimensional array,   //item[0] relative to each one-dimensional array in the first value   //So above this 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 one is more powerful, can loop each property     //Output result is: 1   2  3  

2. Traversing the DOM element

Pop Coffee,milk,soda in turn
Comparison of 3.each and map
The following example is to get the ID value of each multi-box;
Each method:
Define an empty array, add the ID value to the array through each method, and the alert value after the array is converted to a string;
$ (function () {    var arr = [];    $ (": CheckBox"). each (function (index) {        arr.push (this.id);    });    var str = arr.join (",");    alert (str);})
Map method:
Each: checkbox executes return this.id, and these return values are automatically saved as jquery objects, then converted to native JavaScript arrays with the Get method, then converted to strings using the Join method, and 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 required.
Use each in 4.jquery
Examples of arrays, using both the element index and the content. (i is the index, n is the content)
The code is as follows:
Instances of the object, using both the member name and the variable content. (I is the member name, n is the variable content) code is as follows:
Example of a DOM element, where an input form element is used as an example.
If you have a code like this in the 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"/>
Then you use each of the following
The code is as follows:
Find elements in 5.each based on this
Implementation effect "Reply" Two words only show up when the mouse is over
<ol class= "Commentlist" >    <li class= "comment" >        <div class= "Comment-body" >          <p> Hi , first floor comments </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 comments </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 ();});
Realize the effect, verify whether the question has the choice
Html
  
<ul id= "Ulsingle" > <li class= "Listyle" > 1.&nbsp;&nbsp; Aston on time <label id=                "Selecttips" style= "Display:none" class= "filltims" > Please select </label> <!--begin Option-- <ul> <li class= "LiStyle2" > &lt Span id= "repsingle_repsinglechoices_0_laboption_0" >a </span> Assad sends <input type= "hidden" name= "RepSingle                                $ctl 00$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 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$repsinglecho Ices$ctl01$chesinglechoice "/></li> <li class=" LiStyle2 "                                ; <span id= "repsingle_repsinglechoices_0_laboption_2" >c </span>. Aston <input type= "hidden" name= "repSing                                Le$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 Options--<br/> </li> </ul>
JS Code
        Verify that the single selected topic is checked for        $ ("Ul#ulsingle>li.listyle"). each (function (index) {            ///= number of options            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 ();            }        })
6. Official explanations
The following is an official explanation:

Jquery.each (object, [callback])

Overview
A general-purpose example of a method that can be used to sample 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 object's member or array, 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
Each member/element executes a callback function.
Each traversal in JavaScript