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