jQuery：如何使用：not（class）选择：first-child

Question

I would like to select first occurrence of li from an ul which is not having particular class.

Check below snippet for example, Here I wanted add class red to first li which is not having class myClass . Here am expecting <li>Two</li> should add class red .

 $(document).ready(function() { $('ul li:not(.myClass):first-child').addClass('red'); }); 

 .red { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="myClass">One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 

Update: In same way I wanted to select second-child as well. Is it possible?

Thanks in Advance.

Answer 1

Use :first instead of :first-child selector

 $(document).ready(function() { $('ul li:not(.myClass):first').addClass('red'); }); 

 .red { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="myClass">One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 

You can target element based on index using .eq(index)

$('ul li:not(.myClass):eq(1)').addClass('red');

Answer 2

You just need to use :first instead of using :first-child . So your selector should like 'ul li:not(.myClass):first'

$(document).ready(function() {
  $('ul li:not(.myClass):first').addClass('red');
});

Eidted

After your comment, I would like to recommend jquery eq() function. By using eq() you can select any li by passing nth number of li .

$('ul li:not(.myClass):eq(1)').addClass('red');

For eq() function first position of li is 0

Answer 3

try

$(document).ready(function() {
  $('ul li:first-child').addClass('red');
});