CODEWITHSUNDEEP
jquerycss-selectors
zhuanzhou
zhuanzhou

Reputation: 2443

How to select first N elements with jquery?

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

i want to only add onmouse over event to the first three li(tab1,tab2,tab3). how to write the if condition.

Upvotes: 19

Views: 23618

Answers (7)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Use .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>

Upvotes: 3

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

You don't need an if - you can use the jQuery :lt() selector

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

Note that the index is zero-based, so the first three are 0, 1 and 2

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

Update July 2020:

As of jQuery 3.4, the :lt pseudo-class is deprecated. Remove it from your selectors and filter the results later using .slice(). For example, :lt(3) can be replaced with a call to .slice(0,3)

Upvotes: 53

maheshwaghmare
maheshwaghmare

Reputation: 2192

You can use :nth-child(-n+{TARGET_NUMBER})

Use ul li:nth-child(-n+3) to select first 3 elements.

E.g.

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

Upvotes: 2

jAndy
jAndy

Reputation: 235992

Actually, you don't need any conditional statement, you can do it with a single selector:

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

If you want to further "filter" your <li> nodes, be more specific, like

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

update:

To answer your updated question:

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

^= will select all classnames which begin with a given string ("tab" in this case)

Upvotes: 5

Mr.J4mes
Mr.J4mes

Reputation: 9266

I guess it should be like: 

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

});

Upvotes: 0

Gajendra Bang
Gajendra Bang

Reputation: 3583

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

Upvotes: 0

Hnatt
Hnatt

Reputation: 5935

You don't need "if". Use selectors

$("ul li:first")

Upvotes: 2

Related Questions