Home > Developer > JavaScript
JQuery traversal function details, jquery Calendar function details
JQuery traversal functions include methods for filtering, searching, and concatenating elements.
Function Description. add () adds the element to the set of matching elements .. AndSelf () adds the previous element set in the stack to the current set .. Children () obtains all child elements matching each element in the element set .. Closest () matches the parent element step by step from the element itself and returns the first matched ancestor element .. Contents () obtains the child elements of each element in the matched element set, including text and comment nodes .. Each () iterates on jQuery objects and executes functions for each matching element .. End () ends the last filtering operation in the current chain and returns the Matching Element Set to the previous status .. Eq () reduces the set of matching elements to the new element located in the specified index .. Filter () reduces the set of matching elements to the new elements returned by the matching selector or matching function .. Find () gets the descendant of each element in the current matched element set, which is 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 the set of descendants containing specific elements .. Is () checks the current Matching Element Set Based on the selector. if at least one matching element exists, true is returned .. Last () reduces the set of matching elements to the last element in the set .. Map () transmits each element in the current matching set to the function to generate a new jQuery object containing the returned value .. Next () to obtain the peer element that matches each element in the element set .. NextAll () is used to obtain all peer elements after each element in the element set. The selector filters (optional ).. NextUntil () obtains all peer elements after each element until an element matching the selector is met .. Not () deletes an element from the matched element set .. OffsetParent () gets the first parent Element Used for positioning .. Parent () obtains the parent element of each element in the current matched element set, which is filtered by the selector (optional ).. Parents () obtains the ancestor elements of each element in the currently matched element set, which are filtered by the selector (optional ).. ParentsUntil () obtains the ancestor element of each element in the currently matched element set until an element that matches the selector is encountered .. Prev () is used to obtain the first peer element next to each element in the matched element set, which is filtered by the selector (optional ).. PrevAll () obtains all the peer elements before each element in the element set. The selector filters (optional ).. PrevUntil () obtains all peer elements before each element until an element matching the selector is met .. Siblings () is used to obtain the peer elements of all elements in the element set. It is filtered by the selector (optional ).. Slice () reduces the set of matching elements to a subset of the specified range.
Each usage
1. each in the array
Var arr = ["one", "two", "three", "four"]; $. each (arr, function () {alert (this) ;}); // The above each Outputs one, two, three, four var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9] $. each (arr1, function (I, item) {alert (item [0]) ;}); // In fact, arr1 is a two-dimensional array, and item is equivalent to taking every one-dimensional array, // item [0] is relative to the first value in each one-dimensional array. // 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 is more powerful and can loop through every attribute. // The output result is: 1 2 3 4
2. Traverse Dom elements
<Html>Pop up Coffee, Milk, Soda in turn
3. Comparison of each and map
The following example shows how to obtain the ID value of each multi-box;
Each method:
Defines an empty array, and adds the ID value to the array through the each method. After the array is converted 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:
Run return this for each: checkbox. id; then, the returned values are automatically saved as jQuery objects. Then, the get method is used to convert them into Native Javascript arrays, and then the join method is used to convert them into strings. Finally, the alert value is used;
$(function(){ var str = $(":checkbox").map(function() { return this.id; }).get().join(); alert(str);})When an array value is required, it is very convenient to use the map method.
4. Use each in jquery
Sample array, using both the 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 );});Sample object and use both the member name and variable content. (I is the member name, and n is the variable content)
The Code is as follows:$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name: " + i + ", Value: " + n );});This example uses an input form element as an example.
If you have such code 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 the each as follows:
The Code is as follows:
$. Each ($ ("input: hidden"), function (I, val) {alert (val); // output [object HTMLInputElement] because it is a form element. Alert (I); // The output index is 0, 1, 3, and alert (val. name); // output name value alert (val. value); // output value });5. Search for elements based on this in each
The word "reply" is displayed only when the mouse passes.
<Ol class = "commentlist"> <li class = "comment"> <div class = "comment-body"> <p> Hi, first-level comment </p> <div class = "reply"> <a href = "#" class = ". comment-reply-link "> reply </a> </div> <ul class =" children "> <li class =" comment "> <div class = "comment-body"> <p> Layer 2 comment </p> <div class = "reply"> <a href = "#" class = ". comment-reply-link "> reply </a> </div> </li> </ul> </li> </ol>The js Code is as follows:
$("div.reply").hover(function(){ $(this).find(".comment-reply-link").show();},function(){ $(this).find(".comment-reply-link").hide();});To verify whether all the answer questions have been selected.
Html
<Ul id = "ulSingle"> <li class = "liStyle"> 1. aston on time <label id = "selectTips" style = "display: none" class = "fillTims"> select </label> <! -- Begin option --> <ul> <li class = "liStyle2"> <span id = "repSingle_repSingleChoices_0_labOption_0"> A </span>. <input type = "hidden" name = "repSingle $ ctl00 $ repSingleChoices $ ctl00 $ hidID" id = "login" value = "1"/> <input id = "login ""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 = "login" value = "2"/> <input id = "login ""type =" checkbox "name =" repSingle $ ctl00 $ repSingleChoices $ ctl01 $ cheSingleChoice "/> </li> <li class =" liStyle2 "> <span id =" Your _ LabOption_2 "> C </span>. aston <input type = "hidden" name = "repSingle $ ctl00 $ repSingleChoices $ ctl02 $ hidID" id = "login" value = "3"/> <input id = "login" type = "checkbox" name = "repSingle $ ctl00 $ repSingleChoices $ ctl02 $ cheSingleChoice"/> </li> </ul> <! -- End option --> <br/> </li> </ul>Js Code
// Verify whether the single-choice question is selected $ ("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 explanation
The following is an official explanation:
JQuery. each (object, [callback])
Overview
The general example method can be used for example object and array.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 object's member or array index, and the second is the corresponding variable or content. If you want to exit the each loop, the callback function returns false. Other return values are ignored.
Parameters
ObjectObject
Objects or arrays that need to be repeated.Callback (optional) Function
The callback function executed by each member/element.The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
