http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2Feach
JavaScript Tutorial/jQuery/each - История изменений
2026-04-04T15:16:01Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/each&diff=9747&oldid=prev
Admin: 1 версия
2010-05-26T08:25:22Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/each&diff=9746&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:57Z
<p></p>
<p><b>Новая страница</b></p><div>== Append value with each function==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
var $append = " Marx";<br />
$(["A", "B", "C", "D"])<br />
.each(<br />
function() {<br />
$("ul").append("<li>" + this + $append + "</li>"); <br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<ul><br />
</ul><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Each function and array==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var anArray = ["one","two","three",4];<br />
var anObject = {one:1, two:2, three:3};<br />
$.each(anArray,function(n,value){<br />
document.write("["+n+"]="+value);<br />
});<br />
$.each(anObject,function(n,value){<br />
document.write("["+n+"]="+value);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p id="followMe">Follow me!</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Each function and map array==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var anArray = ["one","two","three",4];<br />
var anObject = {one:1, two:2, three:3};<br />
$.each(anArray,function(n,value){<br />
document.write("["+n+"]="+value);<br />
});<br />
$.each(anObject,function(n,value){<br />
document.write("["+n+"]="+value);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p id="followMe">Follow me!</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== each function callback==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#exampleTable").find("td").each(function(i, el) {<br />
var inputEl = $(el).children().get(0);<br />
$(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");<br />
})<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<form><br />
<table id="exampleTable"><br />
<tr><br />
<th><br />
Type<br />
</th><br />
<th><br />
Element<br />
</th><br />
</tr><br />
<tr><br />
<td><br />
<input type="button" value="Input Button"/><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<input type="checkbox" /><br />
</td><br />
</tr><br />
</table><br />
</form><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Each span tag==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").attr("id", function (arr) {<br />
return "div-id" + arr;<br />
}).each(function () {<br />
$("span", this).html("(ID="" + this.id + "")");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>A<span></span></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== For each array element==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var arr = [ "one", "two", "three", "four", "five" ];<br />
jQuery.each(arr, function() {<br />
alert(this);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== For each function with index and value==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var arr = [ "one", "two", "three", "four", "five" ];<br />
jQuery.each(arr, function(i, val) {<br />
alert(i+" "+ val);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get each loop index==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("button").click(function () {<br />
$("div").each(function (index, domEle) {<br />
if ($(this).is("#stop")) {<br />
$("span").text("#" + index);<br />
return false;<br />
}<br />
});<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<button>Click</button> <br />
<span></span><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div id="stop">Stop here</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Hard code value into each function==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$.each(<br />
["A", "B", "C", "D"],<br />
function() {<br />
$("ul").append("<li>" + this + "</li>"); <br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
body {<br />
font: 16px sans-serif;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
</ul><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Loop through each tag==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("*", document.body).each(function () {<br />
var parentTag = $(this).parent().get(0).tagName;<br />
alert(parentTag);<br />
<br />
});<br />
});<br />
</script><br />
<style><br />
.y { background:yellow; }<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div><button disabled="disabled">First</button> <span class="selected"></span><br />
<span></span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Return true as continue statement==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$(["A", "B", "C", "D"])<br />
.each(<br />
function() {<br />
if (this == "A") {<br />
return true;<br />
}<br />
$("ul").append(<br />
"<li>" + this + "</li>"<br />
);<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<ul><br />
</ul><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use each function to add class==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("li").each(<br />
function() {<br />
$(this).addClass("my");<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 5px;<br />
padding: 0;<br />
}<br />
li.my {<br />
background: #a0cde5;<br />
border: 4px solid #99c6dd;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
</ul><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use Each Function To loop through Selected Item==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("select").change(function () {<br />
var str = "";<br />
$("select option:selected").each(function () {<br />
str += $(this).text() + " ";<br />
});<br />
$("div").text(str);<br />
}).trigger("change");<br />
});<br />
</script><br />
</head><br />
<body><br />
<select name="A" multiple="multiple"><br />
<option>A</option><br />
<option selected="selected">B</option><br />
<option>C</option><br />
</select><br />
<div></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use foreach to create li==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
var $items = [<br />
"C",<br />
"B",<br />
"V",<br />
"R"<br />
];<br />
$($items).each(<br />
function() {<br />
$("ul").append("<li>" + this + "</li>"); <br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<ul><br />
</ul><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use "return" to break out of each() loops early.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("button").click(function () {<br />
$("div").each(function (index, domEle) {<br />
$(domEle).css("backgroundColor", "yellow"); <br />
if ($(this).is("#stop")) {<br />
return false;<br />
}<br />
});<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<button>Change colors</button> <br />
<span></span><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div id="stop">Stop here</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
</body><br />
</html></source></div>