如何在jQuery中选择一组元素

62
<div id="myDiv">
     <a>...</a>
     <a>...</a>
     <a>...</a>
     <a>...</a>
     <a>...</a>
     <a>...</a>
</div>
如果你想选择上述例子中的第二、三和四个a标签,你该如何做呢?我所能想到的唯一方法是:
$("#myDiv a:eq(1), #myDiv a:eq(2), #myDiv a:eq(3)")

但那看起来并不是很有效率或美观。我猜你也可以选择所有的a,然后对它们运行.each,但如果有更多的a,那么这可能会变得非常低效。

3个回答

127

jQuery的slice()函数可以通过输入第一个和最后一个所需元素的索引,选择匹配元素集合的子集。需要注意的是,它并不包括最后一个元素本身。

在您的特定情况下,您应该使用:

$("#myDiv a").slice(1, 4)

$('.className').slice(1, 4) 这个也很有用,正是我场景所需要的,非常感谢启发了我的思路 :) - pulkitsinghal
这样广泛的初始选择器是否会增加处理开销,与更具体的选择器相比呢?或者你认为 :lt、:gt 和 :eq 更耗费资源? - aaronbauman
太好了。这也适用于从选择元素中选择多个选项。 - Surya

10

使用.slice()函数可以完全满足我的需求。


3
你可以通过提取数组的一部分来完成这个操作。代码行如下:
$("div[id='myDiv'] > a").slice(1,4).css("background","yellow");

你对此感兴趣。它会影响第二、第三和第四个元素。
<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("a").click(function(event){
                    $("div[id='myDiv'] > a").slice(1,4).css("background","yellow");
                    event.preventDefault();
                });
            });
        </script>
    </head>
    <body>
        <div id="myDiv">
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
        </div>
        <hr>
        <a href="" >Click here</a>
        <hr>
    </body>
</html>

7
ID 选择器的效率极低。你应该使用 $("#myDiv") 的语法。 - FiniteLooper

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接