Jquery$.each loop traversal detailed, various value comparisons, $.each traversal arrays, objects, DOM elements, two-dimensional arrays, double-layered, json-like data, etc.

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.

 $(function(){         //Set the default check$ ("Select:eq (0)"). Val (2); //If multiple selections, an array is returned that contains the selected value. $.each ($ ("Select:eq (0)"). Val (),function(i,v) {//$ ("select:eq (0)"). Val () should return an array      //There are 5 ways to iterate through an arrayConsole.log (v); Console.log (array name [i])//You can use $ (this) or this function () to not pass the value.Alert ($ ( This) [0]);//don't understand but can take out values      //=========this Value ================      //$ (this) [0] = = = vAlert This); Alert ( This[0]);//don't understand but can take out values    }); //gets the current value of the selected matching element of select, that is, [even if multiple selection also only] gets the Val content of the first matching element, is a string so split () to the array$.each ($ ("Select:eq (0): Selected"). Val (). Split (),function(i,v) {//The same 5 different waysConsole.log (v);    }); //examples of DOM elements such as the selcted option$.each ($ ("Select:eq (0): Selected"),function(I,V) {//Traverse the selected    //$.each ($ ("select:eq (0) option"), function (i,v) {//Traverse all elementsConsole.log (v);//Traverse out <option value= "2" > Banana </option> like this HTML element        //Note the valueConsole.log (v.name);        Console.log (V.value);        Console.log (V.text); //=========this value =================Console.log ( This)//similar to the above, this is equivalent to VConsole.log ( This. Name); Console.log ( This. Value); Console.log ( This. Text); //=======$ (This) value ============        //$ (this) [0] = = = vAlert ($ ( This). Val ()); Alert ($ ( This). Text ()) ======alert ($ ( This). HTML ());        }); //using each in ====================jquery, you can return the callback function if you need to exit each loop false;===========================    //The first is the index of the member name or array of the object, and the second is the corresponding variable value or content   //examples of arrays, using both the element index and the content. (i is the index, n is the content)$.each ([0,1,2],function(i, n) {//There are 5 ways to iterate through an arrayAlert ("Item #" + i + ":" + N);//There are two ways to take the value 1, the array name [i] 2, nalert (array name [i]); //=========$ (This) value ================Alert ($ ( This) [0]);//don't understand but can take out values        //=========this Value ================Alert This); Alert ( This[0]);//don't understand but can take out values      }); //instances of the object, using both the member name and the variable content. (I is the member name, n is the variable content)$.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 code like this in Dom <input name= "AAA" type= "hidden" value= "111"/> <input name= "bbb" type= "hidden" value= "2 "/> <input name=" CCC "type=" hidden "value=" 333 "/> <input name=" ddd "type=" hidden "value=" 444 "/> /c4>*/$.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      //pay attention to the bottom valuealert (val.name);//the value of the output namealert (Val.value);//outputs the value of value      //=========this value =================Console.log ( This)//similar to the above, this corresponds to ValConsole.log ( This. Name); Console.log ( This. Value); Console.log ( This. Text); //=========$ (This) value ============       //$ (this) [0] = = = vAlert ($ ( This). Val ()); Alert ($ ( This). Text ()) ======alert ($ ( This). HTML ());    }); //==================================================================  //It turns out that the double-this,$ (this) is used only in function () value  //A bad two-dimensional array$.each ([[1, 4, 3], [4, 6, 6], [7, 20, 9],function(I, item) {$.each (item,function(K,V) {//item is the equivalent of taking each one-dimensional array,Console.log (v);         });    }); //multiple objects are "frequently used in JSON strings"$.each ([{name: "A", Lang: "B"},{Name: "John", Lang: "JS"}],function(i, N) {$.each (n,function(k,v) {alert ("Name:" + K + ", Value:" +v);        });    }); Comparison of each and map/*The following example gets the ID value for each multi-box, each method: Defines an empty array, adds an ID value to the array through each method, and finally converts the array to a string, alert, which is the value; $ (function () {              var arr = [];              $ (": CheckBox"). each (function (index) {arr.push (this.id);              });              var str = arr.join (",");          alert (str); }) Map method: Execute return this.id for each: checkbox, save these return values automatically as jquery objects, then convert them to native JavaScript arrays using the Get method, and then use the Join method to convert Into a string, the last alert this value; $ (function () {var str = $ (": CheckBox"). Map (function () {return thi              S.id;                  }). Get (). Join ();          alert (str); }) It is convenient to use the map method when there is a need for an array of values. */  }); </script>
Jquery$.each loop traversal detailed, various value comparisons, $.each traversal arrays, objects, DOM elements, two-dimensional arrays, double-layered, json-like data, etc.