JavaScript Tutorial/jQuery/each — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:25, 26 мая 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
<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("<li>" + this + $append + "</li>");
}
);
}
);
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
Each function and array
<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>
<p id="followMe">Follow me!</p>
</body>
</html>
Each function and map array
<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>
<p id="followMe">Follow me!</p>
</body>
</html>
each function callback
<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>
<table id="exampleTable">
<tr>
<th>
Type
</th>
<th>
Element
</th>
</tr>
<tr>
<td>
<input type="button" value="Input Button"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
</form>
</body>
</html>
Each span tag
<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>
<div>A<span></span></div>
</body>
</html>
For each array element
<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>
<p></p>
</body>
</html>
For each function with index and value
<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>
<p></p>
</body>
</html>
Get each loop index
<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>
<span></span>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div id="stop">Stop here</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
Hard code value into each function
<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("<li>" + this + "</li>");
}
);
}
);
</script>
<style type="text/css">
body {
font: 16px sans-serif;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Loop through each tag
<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>
<div><button disabled="disabled">First</button> <span class="selected"></span>
<span></span>
</div>
</body>
</html>
Return true as continue statement
<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(
"<li>" + this + "</li>"
);
}
);
}
);
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
Use each function to add class
<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>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
Use Each Function To loop through Selected Item
<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>
<div></div>
</body>
</html>
Use foreach to create li
<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("<li>" + this + "</li>");
}
);
}
);
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
Use "return" to break out of each() loops early.
<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>
<span></span>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div id="stop">Stop here</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>