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>

我想只将onmouseover事件添加到前三个li（tab1，tab2，tab3）。如何写if条件。

Answer 1

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

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

请注意，索引是从零开始的，因此前三个是0,1和2

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

Answer 2

实际上，您不需要任何条件语句，您可以使用单个选择器执行此操作：

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

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

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

<强>更新：

要回答您更新的问题：

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

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

Answer 3

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

$("ul li:first")

Answer 4

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

Answer 5

我想应该是这样的：

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

});

Answer 6

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

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

E.g。

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

Answer 7

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

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

7 个答案: