Javascript – Select all child elements except the first

javascriptjquery

Say I have the following:

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

How would I select all the child elements after the first one using jQuery? So I can achieve something like:

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>

Best Solution

You should be able to use the "not" and "first child" selectors.

$("li:not(:first-child)").addClass("something");

http://docs.jquery.com/Selectors/not

http://docs.jquery.com/Selectors/firstChild

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – How to get the children of the $(this) selector

The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection.

jQuery("img", this);

Which is the same as using .find() like this:

jQuery(this).find("img");

If the imgs you desire are only direct descendants of the clicked element, you can also use .children():

jQuery(this).children("img");

Best Solution

Related Solutions

Javascript – How to detect a click outside an element

Javascript – How to get the children of the $(this) selector

Related Question