1

我是 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>

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

提前致谢..

4

6 回答 6

4

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

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

http://jsfiddle.net/w4EgP/

于 2013-01-08T08:08:29.893 回答
3

这工作正常。

 $('ul').find('li:lt(3)');
于 2015-03-24T12:12:44.590 回答
0

使用:lt选择器和each函数来遍历你<ul>并获得前三个<li> 

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

在这里摆弄

于 2013-01-08T08:08:53.230 回答
0

您可以使用以下代码。

$("div > ul").find("li:lt(3)").each(function(index, value)
  {
$(this).css('color','Red');
});
于 2013-01-08T08:10:43.790 回答
0

有一个原生 CSS3 选择器，它可以比使用更有效地一次性获取所需的元素:lt

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

见http://jsfiddle.net/alnitak/kS7q5/

于 2013-01-08T09:27:24.400 回答
-1

完整代码如下。

<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>
于 2013-01-08T08:15:08.920 回答