如何使用jQuery选择前N个元素？

Question

<div class="nav-top">
<ul>
  <li class="tab1"><a href="/">test</a></li>
  <li class="tab2"><a href="#">test</a></li>
  <li class="tab3"><a href="#">test</a></li>
  <li class="navahead"><a href="#">test</a></li>
  <li class="navahead"><a href="#">test</a></li>
<li class="new"><a href="#">test</a></li>
</ul>
</div>

我想只为前三个li（tab1，tab2，tab3）添加onmouse over事件。如何编写if条件语句。

- zhuanzhou

Answer 1

你不需要使用 if - 你可以使用 jQuery 的 :lt() 选择器。

$('ul li:lt(3)').mouseenter(function(){});

请注意索引是从0开始的，因此前三个分别为0、1和2。

http://api.jquery.com/lt-selector/

2020年7月更新：

从jQuery 3.4开始，:lt 伪类已被弃用。 从选择器中删除它，稍后使用 .slice() 过滤结果。例如，可以使用调用 .slice(0,3) 替换 :lt(3)。

- Adam Hopkinson

---

问题是，如果有一百万个li元素，jQuery会知道只取前三个，还是会全部取出，然后再切割三个？ - vsync

Answer 2

实际上，您不需要任何条件语句，只需使用单个选择器即可完成：

$('ul li:first').mouseenter(function() {
});

如果您想进一步“筛选”您的<li>节点，请更加具体，例如：

$('ul li.navahead:first').mouseenter(function() {
});

更新：

回答您更新后的问题：

$('ul li[class^=tab]').mouseenter(function() {
});

^=将选择所有以给定字符串（在此情况下为“tab”）开头的类名。

- jAndy

Answer 3

使用.slice(startIndex, endIndex)方法

$("div").slice(0, 2).remove();

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- Roko C. Buljan

Answer 4

你不需要使用"if"语句，可以使用选择器。

$("ul li:first")

- Hnatt

Answer 5

您可以使用:nth-child(-n+{目标数字})

使用ul li:nth-child(-n+3)选择前3个元素。

例如：

$('ul li:nth-child(-n+3)').mouseenter(function() {
    // your code goes here
});

- maheshwaghmare

Answer 6

$("li.tab1, li.tab2, li.tab3").mouseover(function(){
    // write your code here
});

- Gajendra Bang

Answer 7

我猜应该是这样的：

 $(".tab1").mouseover(function() {

});

- Mr.J4mes