jQuery基础:处理多个选择结果(each迭代方法)
来源:程序员人生 发布时间:2014-04-12 21:32:53 阅读次数:2764次
jQuery提供.each()方法来对选中的结果进行循环处理,而且在每次执行函数时,都会给函数传递匹配元素在选中结果里所处位置的数字值作为参数(从零开始的整形变量)。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
例子一
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
<button>选中所有列</button>
//使用下面的jQuery代码,点击按钮后,所有列将被选择,并且在每列后加上index
$(document).ready(function() {
$('button').click(function(){
$('li').each(function(index){
var str = "<b>"+index+"</b>";
$("li:eq("+index+")").append(str);
});
});
});
//注意:index是从零开始的整形变量。
例子二
<ul>
<li>第一列</li>
<li>第二列</li>
<li class="mark">第三列</li>
<li class="mark">第四列</li>
</ul>
<button>选择列</button>
//使用下面的jQuery代码,点击按钮后,class为“mark”的列将被选择
$(document).ready(function() {
$('button').click(function(){
$('li').each(function(index){
if ($(this).is(".mark")){
this.style.color = 'blue';
}
});
});
});
//如果我们只想选第一个class为"mark"的列,可以使用return false,停止循环
$(document).ready(function() {
$('button').click(function(){
$('li').each(function(index){
if ($(this).is(".mark")){
this.style.color = 'blue';
return false; //注意这个return
}
});
});
});
注意:在上述例子里,我用到了$(this)和this, 前者是jQuery对象,后者是DOM对象。jQuery对象具有is方法,但不具有style方法,同理,DOM对象具有style方法,但不具有is方法。
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠