JavaScript Tutorial/jQuery/each
Версия от 21:52, 25 мая 2010; (обсуждение)
Содержание
- 1 Append value with each function
- 2 Each function and array
- 3 Each function and map array
- 4 each function callback
- 5 Each span tag
- 6 For each array element
- 7 For each function with index and value
- 8 Get each loop index
- 9 Hard code value into each function
- 10 Loop through each tag
- 11 Return true as continue statement
- 12 Use each function to add class
- 13 Use Each Function To loop through Selected Item
- 14 Use foreach to create li
- 15 Use "return" to break out of each() loops early.
Append value with each function
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { var $append = " Marx"; $(["A", "B", "C", "D"]) .each( function() {$("ul").append("
} ); }
);
</script> </head> <body>
</body>
</html></source>
Each function and array
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var anArray = ["one","two","three",4]; var anObject = {one:1, two:2, three:3}; $.each(anArray,function(n,value){ document.write("["+n+"]="+value); }); $.each(anObject,function(n,value){ document.write("["+n+"]="+value); }); }); </script> </head> <body> <body>
Follow me!
</body>
</html></source>
Each function and map array
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var anArray = ["one","two","three",4]; var anObject = {one:1, two:2, three:3}; $.each(anArray,function(n,value){ document.write("["+n+"]="+value); }); $.each(anObject,function(n,value){ document.write("["+n+"]="+value); }); }); </script> </head> <body> <body>
Follow me!
</body>
</html></source>
each function callback
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#exampleTable").find("td").each(function(i, el) { var inputEl = $(el).children().get(0); $(el).before("<td>Added " + $(inputEl).attr("type") + "</td>"); }) }); </script> </head> <body> <form>
Type |
Element |
---|---|
<input type="button" value="Input Button"/> |
|
<input type="checkbox" /> |
</form>
</body>
</html></source>
Each span tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").attr("id", function (arr) { return "div-id" + arr; }).each(function () { $("span", this).html("(ID="" + this.id + "")"); }); }); </script> </head> <body> <body>
A
</body>
</html></source>
For each array element
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var arr = [ "one", "two", "three", "four", "five" ]; jQuery.each(arr, function() { alert(this); }); }); </script> </head> <body> <body>
</body>
</html></source>
For each function with index and value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var arr = [ "one", "two", "three", "four", "five" ]; jQuery.each(arr, function(i, val) { alert(i+" "+ val); }); }); </script> </head> <body> <body>
</body>
</html></source>
Get each loop index
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $("div").each(function (index, domEle) { if ($(this).is("#stop")) { $("span").text("#" + index); return false; } }); }); }); </script> </head> <body> <body> <button>Click</button>
asdf
asdf
asdf
asdf
Stop here
asdf
asdf
asdf
</body>
</html></source>
Hard code value into each function
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $.each( ["A", "B", "C", "D"], function() {$("ul").append("
} ); }
);
</script> <style type="text/css">
body {
font: 16px sans-serif;
}
</style> </head> <body>
</body>
</html></source>
Loop through each tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("*", document.body).each(function () { var parentTag = $(this).parent().get(0).tagName; alert(parentTag); }); }); </script> <style> .y { background:yellow; } </style> </head> <body> <body>
<button disabled="disabled">First</button>
</body>
</html></source>
Return true as continue statement
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $(["A", "B", "C", "D"]) .each( function() { if (this == "A") { return true; } $("ul").append("
); } ); }
);
</script> </head> <body>
</body>
</html></source>
Use each function to add class
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $("li").each( function() { $(this).addClass("my"); } ); }
);
</script> <style type="text/css">
ul {
list-style: none; margin: 5px; padding: 0;
} li.my {
background: #a0cde5; border: 4px solid #99c6dd;
}
</style> </head> <body>
- A
- B
- C
- D
</body>
</html></source>
Use Each Function To loop through Selected Item
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }).trigger("change"); }); </script> </head> <body> <select name="A" multiple="multiple"> <option>A</option> <option selected="selected">B</option> <option>C</option> </select>
</body>
</html></source>
Use foreach to create li
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { var $items = [ "C", "B", "V", "R" ]; $($items).each( function() {$("ul").append("
} ); }
);
</script> </head> <body>
</body>
</html></source>
Use "return" to break out of each() loops early.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $("div").each(function (index, domEle) { $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { return false; } }); }); }); </script> </head> <body> <body> <button>Change colors</button>
asdf
asdf
asdf
asdf
Stop here
asdf
asdf
asdf
</body>
</html></source>