如何用jquery选择前N个元素？答案

【问题标题】：How to select first N elements with jquery?如何用jquery选择前N个元素？
【发布时间】：2011-10-07 12:20:19
【问题描述】：

<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)。 if条件怎么写。

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

使用.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>

【讨论】：

【解决方案2】：

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

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

注意索引是从零开始的，所以前三个是0、1和2

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

2020 年 7 月更新：

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

【讨论】：

问题是，如果有一百万个li 元素怎么办。 jQuery 会知道只取前 3 个，还是全部取走，然后切片 3。

【解决方案3】：

您可以使用:nth-child(-n+{TARGET_NUMBER})

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

例如

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

【讨论】：

【解决方案4】：

其实你不需要任何条件语句，只需要一个选择器就可以了：

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

如果您想进一步“过滤”您的 <li> 节点，请更具体，例如

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

更新：

回答您更新的问题：

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

^= 将选择所有以给定字符串开头的类名（在本例中为“tab”）

【讨论】：

【解决方案5】：

我猜应该是这样的：

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

});

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

你不需要“如果”。使用选择器

$("ul li:first")

【讨论】：