为什么jQuery选择器（“父>子”）跳过子项？

Question

我不知道为什么我的选择器似乎在跳过孩子。 我很确定这是由于我没有完全理解（“ parent> child”）选择器，但是我不知道该怎么做才能更好地理解这一点，而不必问别人。 我一直在阅读jQuery文档，搜索Google并搜索stackoverflow。 我找到了有关选择器的信息，但似乎没有任何答案。

请检查以下jsfiddle：

https://jsfiddle.net/49kboqze/

这是我的jQuery代码：

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

});

}

当我运行以下代码时：

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

    console.log(  parentEls );

它返回元素的所有父类。 因此，我100％肯定拥有thumbdiv类的div是其直接父级，并且其“祖父母”是具有沉迷性的div。 到目前为止，无论从我的角度还是在实践中，一切似乎都有意义。 这是我必须举起手来的地方； thumbdiv有几个兄弟姐妹，其中一个在兄弟姐妹的正上方，div是一类mainimgdiv。 mainimgdiv也是一个顽固的孩子，实际上，它是第一个孩子。 因此，我无法理解自己的一生，为什么当我到达父级div.imggallery并从该点开始使用选择器时，它会跳过它的第一个孩子，而又回到第二个孩子div.thumbdiv。 这甚至不是$（this）所在的位置（这是a.thumblink，这是div.thumbdiv的唯一子级）。

我以为它可能与.each函数有关，所以我尝试在条件之外使用选择器，但它仍然以相同的方式起作用。

我很茫然，我似乎无法弄清楚。 我在这里想念什么？

非常感谢您的宝贵时间！

Answer 1

当你有这个：

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

...您所说的是“选择this元素的所有祖先， this祖先也恰好与选择器"div.imggallery > div"匹配”。

您的mainimgdiv div 不是 this元素的祖先，即您的锚点，因此它不包含在选择中。 换句话说，不是您的选择器在“跳过”孩子，而是您使用了.parents()这个事实。

如果您打算通过DOM导航从单击的链接转到该mainimgdiv ，则可以执行以下操作：

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

也就是说，使用.closest()在树中向上导航到祖先的imggallery ，然后从那里使用.find()向下导航到mainimgdiv元素。

Answer 2

简而言之，jQuery选择器以CSS选择器为模型。

$(".parent > .child")

上面将选择直系子女，而不是子女的子女。

看一下这个演示： http : //jsbin.com/duhadikiji/edit?html,js,output