Why is the jQuery selector, (“parent > child”), skipping children?

Question

I can't figure out why it looks like my selector is skipping children. I'm pretty sure it's due to my not fully understanding the ("parent > child") selector, but I don't know what more I could do to better understand this short of asking someone. I've been reading the jQuery documentation, searching Google and searching stackoverflow. I've found information on the selector in question, but nothing seems to answer my question.

Please check out the following jsfiddle:

https://jsfiddle.net/49kboqze/

and here's my jQuery code:

if($("div.thumbdiv").length)  {

$("a.thumblink").each(function(index) {
    var $href = $(this).attr("href");
    var $title = $(this).attr("title");
    var $alt = $(this).find($("img.thumbnail")).attr("alt");

    $(this).parents("div.imggallery > div").css("outline", "solid red 1px");

});

}

When I run the following code:

var parentEls = $(this).parents()
        .map(function() {
         return $(this).attr("class");
         })
        .get()
        .join( ", " );

    console.log(  parentEls );

it returns all of the element's parent's classes. I am 100% sure, because of this, that the div with a class of thumbdiv is it's immediate parent, and it's "grandparent" is a div with the class of imggallery. So far everything seems to make sense both in my head, and in practice. Here's where I have to throw my hands up though; thumbdiv has a couple of siblings, one of which is directly above it, the div with a class of mainimgdiv. mainimgdiv is a child of imggallery as well and, in fact, it's first child. So I can't understand for the life of me why, when I reach the parent div.imggallery and then use a selector from that point, that it skips it's first child and goes back down to it's second child, div.thumbdiv. That's not even where $(this) is (this being a.thumblink, which is the only child of div.thumbdiv).

I thought it may have something to do with the .each function, so I tried using the selector outside of the conditional and it still acted the same way.

I'm at a loss and I can't seem to figure this out. What am I missing here?

Thank you very much for your time!

Answer 1

When you have this:

$(this).parents("div.imggallery > div")

...what you are saying is "select all of the ancestors of this element which also happen to match the selector "div.imggallery > div" ".

Your mainimgdiv div is not an ancestor of the this element, your anchor, so it is not included in the selection. In other words, it is not your selector that is "skipping" the children, it is the fact that you used .parents() .

If your intention is to get from the clicked link to that mainimgdiv via DOM navigation then you could do this:

$(this).closest("div.imggallery").find(".mainimgdiv")

That is, use .closest() to navigate up through the tree to the ancestor imggallery , then from there use .find() to navigate back down to the mainimgdiv element.

Answer 2

Simply said, jQuery selectors are modelled after CSS selectors.

$(".parent > .child")

The above would select immediate children, but not children of children.

Have a look at this demo: http://jsbin.com/duhadikiji/edit?html,js,output