jQuery如何处理多个选择结果

本文小编为大家详细介绍“jQuery如何处理多个选择结果”，内容详细，步骤清晰，细节处理妥当，希望这篇“jQuery如何处理多个选择结果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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 方法。

读到这里，这篇“jQuery如何处理多个选择结果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。