Jquery - get all rows except the first and last

Question

I want to dynamically add a class to all rows of the table except the first and last row. how would I do this without assigning a css class to strings to identify them. I get everything except the first line now with

$("#id").find("tr:gt(0)") 

Do I need to somehow combine this with not("tr:last") ?

Answer 1

Drop gt() , as I assume it will be a little slower than :first .

Use not() in combination with :first and :last :

 $('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight'); 

Most browsers automatically add the tbody element to the table tbody if this is missing, so the immediate child selector failed to fail; there were no <tr> elements as immediate children of the <table> .

I am not 100% sure that all browsers do this, so it would be safer to just add <tbody> manually. Otherwise, you need to sniff a little and can not do it as one liner:

 if($('table#tbl > tbody').size() > 0) { $('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight'); } else { $('table#tbl > tr').not(':first').not(':last').addClass('highlight'); } 

Hope this solves your problem!

Answer 2

Try the following:

 .not(':first').not(':last') 

Answer 3

why not only that?

 $('table tr:not(:first-child):not(:last-child)'); 

works like a pure CSS selector.

Answer 4

You can combine .not() methods in one, separating the selectors with commas:

 $('#id tr').not(':first, :last'); $('#id tr:not(:first, :last'); 

Note that the second is not valid in pure CSS, only as a jQuery selector. For pure CSS, you will need to use @Sumit's answer.

Answer 5

Strange published suggestions didn't work, they should all work! BUT...

If this does not work, do it this way ... a little slower, but SHOULD WORK !! TRY:

 $('table#tbl tr').addClass('highlight'); $('table#tbl tr:first-child').removeClass('highlight'); $('table#tbl tr:last-child').removeClass('highlight'); 

Answer 6

You can also use the .slice() method to remove the first / last elements from a set:

 $('table tr').slice(1, -1); 

The .slice() method essentially creates a new jQuery object with a subset of the elements specified in the source set. In this case, it will exclude elements with index 1 and -1 , which are first / last, respectively.

Example:

 $('table tr').slice(1, -1).css('background-color', '#f00'); 

 table { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td>1</td></tr><tr><td>2</td></tr> <tr><td>3</td></tr><tr><td>4</td></tr> <tr><td>5</td></tr><tr><td>6</td></tr> </table> 

---

Of course, you can also negate :first-child / :last-child with :not() :

 $('table tr:not(:first-child):not(:last-child)').css('background-color', '#f00'); 

 table { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td>1</td></tr><tr><td>2</td></tr> <tr><td>3</td></tr><tr><td>4</td></tr> <tr><td>5</td></tr><tr><td>6</td></tr> </table> 

---

You can also combine :nth-child(n+2) and :nth-last-child(n+2) :

 $('table tr:nth-child(n+2):nth-last-child(n+2)').css('background-color', '#f00'); 

 table { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td>1</td></tr><tr><td>2</td></tr> <tr><td>3</td></tr><tr><td>4</td></tr> <tr><td>5</td></tr><tr><td>6</td></tr> </table>