How to use basic JQuery selectors - Part II


This is  the part II of basic JQuery selectors tutorial. You can read Part 1 get example test html file from previous post.
In this post I'm going to talk about retrieve elements with hierarchical relationships using JQuery selectors.

JQuery heirarchical selectors
  • $("p, li.b").css("border","3px solid red");
    This will get the paragraph elements and List elements that has class attribute "b" and putt a red border around them

  • $("ul li.a").css("border","3px solid red");
    this is called descendent selector (for more details). This will get all the list elements has class "a" with in <ul> elements.

  • $("ul+p").css("border","3px solid red");
    This will get the paragraph element next to <ul> element

  • $("#list1 ~ p").css("border","3px solid red");
    This is called sibling selector(for more details). This will get the every paragraph element after element with ID of "list1"
Please feel free to add a comment if you have any problem or some thing to add.

No comments:

Post a Comment