Question

I have a list of <p> inside a <div id="someDiv">

I use this code to hide all

in the div except the first one

$("#someDiv p:not(:first)").hide();

I want to change the code to do the following:

Check if <p> inside <div id="someDiv"> is more than 5. If it is, hide all div except first 4 ones.

How to write jQuery?

Answer 1

You can use the greater-than/less-than selectors:

$("#someDiv p:lt(4)").hide(); /* hides 0, 1, 2, 3 */

That would hide all paragraphs less than the fifth. To determine whether or not there’s 5 or more paragraphs, you’ll check the length property:

if ($("#someDiv p").length > 5) {
  $("#someDiv p:gt(3)").hide(); /* hides 4, 5, 6... */
}