Question

我无法弄清楚为什么看起来我的选择器正在跳过孩子。我很确定这是因为我没有完全理解（“父母＆gt;孩子”）选择器，但我不知道我还能做些什么来更好地理解这个问某个人的问题。我一直在阅读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是它的直接父级，而它的“祖父母”是一个带有imggallery类的div。到目前为止，一切似乎都在我的头脑和实践中都有意义。这是我必须举手的地方; thumbdiv有几个兄弟姐妹，其中一个直接在它上面，div与一类mainimgdiv。 mainimgdiv也是imggallery的孩子，事实上，它是第一个孩子。所以我无法理解为什么，当我到达父div.imggallery，然后从那一点使用一个选择器，它跳过它的第一个孩子，然后回到它的第二个孩子div.thumbdiv。这甚至不是$（this）的地方（这是a.thumblink，这是div.thumbdiv的唯一孩子）。

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

我很茫然，我似乎无法弄清楚这一点。我在这里缺少什么？

非常感谢你的时间！

Answer 1

当你有这个：

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

...你所说的是＆＃34;选择this元素的所有祖先，这些祖先也恰好与选择器"div.imggallery > div"＆＃34;匹配。

您的mainimgdiv div 不 this元素的祖先，您的主播，因此选择中包含。换句话说，它不是你的选择器＆＃34;跳过＆＃34;孩子们，事实上你使用了.parents()。

如果您打算通过DOM导航从点击的链接转到mainimgdiv，那么您可以这样做：

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

也就是说，使用.closest()将向上通过树导航到祖先imggallery，然后从那里使用.find()导航回{ {1}}元素。

Answer 2

简单地说，jQuery选择器是在CSS选择器之后建模的。

$(".parent > .child")

以上会选择直系孩子，而不是孩子的孩子。

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

为什么jQuery选择器（“父＆gt;孩子”）跳过孩子？

2 个答案: