Jquery > Selector

Question

In this example (which is working) on click of a button the section is toggled visible/invisible. Great but what is the code in line 2 actually doing?? I have found a reference to the :eq(0) part here on jQuery.com but the '>' I have no clue. Under firebug it doesn't seem to matter if the '>' is there or not.

 $("#btnHideShow").click(function() {
                 $("> :eq(0)", "#toggleGrid").toggle("blind");
                 if ($("#btnHideShow").val() == "Hide List") {
                     $("#btnHideShow").val('Show List');
                 } else {
                     $("#btnHideShow").val('Hide List');
                 };
             });

Answer 1

> is a child selector:

5.6 Child selectors A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".

Example(s):

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 } Example(s):

The following example combines descendant selectors and child selectors:

div ol>li p It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.

Answer 2

As far as I know, you use > to specify a direct child, as opposed to any descendant.

Given:

<div class="parent">
  <ul class="child">
    <a href="#">foo</a>
    <a href="#">bar</a>
  </ul>
</div>

.parent a would match the two links, but .parent > a would not, as they are not direct descendants. Similarly, .parent > .child would also match , as would .child > a.

In the code you supplied, you're matching direct children of #toggleGrid. If you only have direct children, you might not notice a difference if the > is included or not - but you might need to be this specific it later down the line.

I always find it to be problematic trying to drop-in other peoples code - it's a good thing you're trying to understand it :)

Check out this article if you need more info.

Answer 3

It's the child selector for the direct children of the referenced element. The line is equivalent (and better written, IMO) to:

$('#toggleGrid > :first').toggle('blind');