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

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.