Question

我是jQuery的新手。我想在单个jquery语句中选择每个无序列表（ul）的前三个列表项（li）。我正在使用以下代码 -

 <div>
First Unordered List  :
    <ul>
        <li>First Ul li1 want to select</li>
        <li>First Ul li2 want to select</li>
        <li>First Ul li3 want to select</li>
        <li>First Ul li4</li>
        <li>First Ul li5</li>
        <li>First Ul li6</li>
    </ul>
    Second Unordered List
     <ul>
        <li>Second Ul li1 want to select</li>
        <li>Second Ul li2 want to select</li>
        <li>Second Ul li3 want to select</li>
        <li>Second Ul li4</li>
        <li>Second Ul li5</li>
        <li>Second Ul li6</li>
    </ul>
</div>

这里无序列表可能超过两个。

提前致谢..

Answer 1

您可以使用:lt选择器+ find方法。

$('ul').find('li:lt(3)');

http://jsfiddle.net/w4EgP/

Answer 2

这很好用。

 $('ul').find('li:lt(3)');

Answer 3

使用:lt选择器和each功能循环浏览<ul>并获取前三个<li>

$("div > ul").each(function(){
 console.log($(this).find('li:lt(3)'));
})

fiddle此处

Answer 4

您可以使用以下代码。

$("div > ul").find("li:lt(3)").each(function(index, value)
  {
$(this).css('color','Red');
});

Answer 5

是本机CSS3选择器，它将比使用:lt

更有效地获取所需的元素

ul > li:not(:nth-child(n + 4))

请参阅http://jsfiddle.net/alnitak/kS7q5/

Answer 6

完整代码如下。

<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var unorder_list = $('div>ul');
    unorder_list.each(function(){
        $(this).find("li:lt(3)").css('color','red');

    });
});
</script>
<body>
<div>
First Unordered List  :
    <ul>
        <li>First Ul li1 want to select</li>
        <li>First Ul li2 want to select</li>
        <li>First Ul li3 want to select</li>
        <li>First Ul li4</li>
        <li>First Ul li5</li>
        <li>First Ul li6</li>
    </ul>
    Second Unordered List
     <ul>
        <li>Second Ul li1 want to select</li>
        <li>Second Ul li2 want to select</li>
        <li>Second Ul li3 want to select</li>
        <li>Second Ul li4</li>
        <li>Second Ul li5</li>
        <li>Second Ul li6</li>
    </ul>
</div>
</body>

Jquery：首先选择每个无序列表的列表项

6 个答案: