<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.
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)
li elements. would jQuery know only to take the first 3, or does it take all, then slice 3.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)
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>You don't need "if". Use selectors
$("ul li:first") 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 }); 
$("li.tab1, li.tab2, li.tab3").mouseover(function(){ // write your code here }); I guess it should be like:
$(".tab1").mouseover(function() { }); 