Jquery select all children after nth-child

Question

I work with jquery and create show hide lists, I need to hide all elements of the list of children that follow the sixth child in ul. I usually did this by setting the height and then changing the height with one click, but for this I need to add overflow:hidden to my css, and this is not an option.

How do I get all the items in a list of children that are larger than the 7th child?

Sort of,

$("ul li:6n").domeSomething()

Answer 1

How do I get all the items in a list of children that are larger than the 7th child?

Select item index = 7 +

 $("ul li:gt(6)").domeSomething() 

:gt selector

The selector uses a zero base index :

Note that since JavaScript arrays use 0-based indexing, these selectors reflect this fact. This is why $ ('. Myclass: gt (1)') selects the elements after the second element in the document with the myclass class, and not after the first. In contrast, nth-child (n) uses 1-based indexing to comply with the CSS specification.

Answer 2

I wanted to write my answer only to discuss the two previous answers: a response from gdoron and a response from neu-rah . If we saw in the vote count, we can see that most readers will find the doron better. I disagree, and I'm trying to explain why.

You can find the explanation in the documentation :gt() Selector (see "Additional Notes:" here ):

Since :gt() is an extension of jQuery and not part of the CSS specification, queries using :gt() cannot take advantage of the performance enhancement provided by the built-in DOM querySelectorAll() method. For best performance in modern browsers, use $("your-pure-css-selector").slice(index) .

You can test the code here or better here (with jQuery 1.7.2 code not minimized). The code uses only the operator $("ul li:gt(6)").css("color", "red"); . You’ll better understand the problem if you run the demo in the Chrome Developer Tools with the Pause on Exceptions button activated. You will see the following exception (it will not be the first):

So, you can see that the current jQuery implementation is trying to use the web browser’s own querySelectorAll() to achieve maximum performance. After that, the function $. MakeArray will be used to create a jQuery wrapper from a NodeList . In case of exception, the line

 return oldSizzle(query, context, extra, seed); 

This way you will have better performance if you use selectors supported by querySelectorAll() . for instance

 $("ul li").slice(7) 

better than

 $("ul li:gt(6)") 

I would recommend using more accurate selectors when possible. For example, if the parent <ul> has id="menu1" , you can use

 $("#menu1 >li").slice(7) 

for best results. This will help if there are several <ul> elements on your page.

Someone might mention: the "ul li:gt(6)" selector is fast enough. This is correct, but you must not forget that you sometimes use selectors inside a loop or use it inside functions that will be called inside loops. Thus, the difference between 10 ms and 30 ms can be much more obvious if the execution time is multiplied by 100.

In addition, someone asks himself the question of how to implement some kind of choice and get an answer, he / she will use the code template forever. I think it would be better to use a template that has a performance advantage. Not this way.

UPDATED . To clear the performance difference of $("ul li:gt(6)") , $("ul li").slice(7) and $("#menu1 >li").slice(7) selectors I made additional demo . Everyone can check the difference in the web browser that he uses. You should also remember that if the page contains many other elements, the id selector will work better.

On my computer, the runtime of $("ul li").slice(7) and $("#menu1 >li").slice(7) about the same (the page has very few elements) and about 2.5-4, 5 times better than for $("ul li:gt(6)") , Results may depend on the number of li elements, the number of elements on the page and many other things, but I hope the test clearly shows that using slice has an advantage performance versus using :gt (exactly the same as we can read in the jqGrid documentation mentioned earlier).

Answer 3

use slice to reduce typing

 .slice(start[,end]) 

http://api.jquery.com/slice/

example (edited)

 $("ul li").slice(6).doSomething(...) 

Answer 4

Try the following:

 $('ul li:eq(6)').nextAll().domeSomething()