CODEWITHSUNDEEP
jqueryjquery-uijquery-selectors
JohnnyBizzle
JohnnyBizzle

Reputation: 979

Jquery > Selector

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');
                 };
             });

Upvotes: 4

Views: 165

Answers (4)

Pointy
Pointy

Reputation: 413717

According to SelectORacle, a > without some selector preceding it selects elements that are a child of any other element. Thus that selector looks like it'd mean the first child element of any element found under the "toggleGrid" element.

The SelectORacle is here: http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py but note that it doesn't understand jQuery-isms.

edit — actually though I'll leave the SelectORacle link here, I'm wrong because I got mixed up with ":eq(0)"; it's not the same as ":first-child" duhh. Thus @tv et al are correct and it's just the first thing that's a child under "toggleGrid".

Upvotes: -1

Jeriko
Jeriko

Reputation: 6637

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.

Upvotes: 5

tvanfosson
tvanfosson

Reputation: 532465

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');

Upvotes: 3

Scott
Scott

Reputation: 3967

> 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.

Upvotes: 0

Related Questions