如何选择三个元素的中间值？

Question

I have three <li> tags in an <ul id="accordion"> . I now want to select the various items via jQuery.

To select the first <li> item, we can use $("#accordion li:first") .

To select the last <li> item, $("#accordion li:last") works

How can I select the middle <li> element through a jQuery selector? There is no :middle pseudo-class that I could use here.

Answer 1

You can combine two ":not" selectors so that you get all of the 'not first, and not last' elements like so:

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

Javascript

$('li:not(:first-child):not(:last-child)').css('color', 'red');

Also, check the JsFiddle

Answer 2

There is no :middle selector, and this makes sense – what element would get matched when we have 4 items? However, you can access elements by their index. Using CSS Level 3 selectors, you can use the :nth-child(…) pseudo-class:

#accordion li:nth-child(2)

The :nth-child pseudoclass can also select repeating patterns of elements, such as all even or odd childs.

jQuery additionally offers the nonstandard :eq(…) pseudoclass for indexing, which you should probably use in this case:

$("#accordion li:eq(1)")  // zero-based indexing

Further reading:

• :nth-child CSS documentation on MDN
• :nth-child jQuery documentation
• :eq jQuery documentation

Answer 3

In this mode you can count number of elements.

for example you have this :

<ul id="someId">
     <li>t1</li>
     <li>t2</li>
     <li>t1</li>
</ul>

the you can use length to count lis

var ln =$("#someId li").length;

after that find middle of length by this code

ln = ln / 2;

then use eq function of jquery to select middle Item like this

$("#someId li:eq("+ln+")").css("border","1px solid red");

But don't forget indexing by using eq starts from 0 . I hope my answer help you :)

Answer 4

Another way to select second element is to use adjacent sibling selector + :

$("#accordion li:first + li")

Here is a demo.

 $("#accordion li:first + li").addClass('selected'); 

 .selected {color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="accordion"> <li>First</li> <li>Second</li> <li>Third</li> </ul> 

And here is also generic solution for arbitrary number of li elements (not only 3):

 $('#accordion li ~ li:not(:last)').addClass('selected'); 

 .selected {color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="accordion"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>