Javascript 为什么jQuery选择器（“parent>；child”）会跳过子项？

我不明白为什么我的选择器会跳过子项。我很确定这是因为我没有完全理解（“父>子”）选择器，但我不知道我还能做些什么来更好地理解这个简短的询问。我一直在阅读jQuery文档，搜索Google和stackoverflow。我找到了有关选择器的信息，但似乎没有任何信息可以回答我的问题

请查看以下JSFIDLE：

下面是我的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）所在的位置（这是一个.thumblink，它是div.thumbdiv的唯一子级）

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

我不知所措，我似乎无法理解这一点。我错过了什么

非常感谢您抽出时间

当您有此功能时：

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

…您所说的是“选择该元素的所有祖先，这些祖先恰好与选择器“div.imggallery>div””匹配

您的

mainimgdiv

div不是您的锚元素

的祖先，因此它不包括在选择中。换句话说，不是您的选择器在“跳过”子项，而是您使用了
.parents（）

如果您的目的是通过DOM导航从单击的链接获取该
mainimgdiv
，则可以执行以下操作：

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

也就是说，使用在树中向上导航到祖先
imggallery
，然后从那里向下导航到
mainimgdiv
元素。
简单地说，jQuery选择器是根据CSS选择器建模的

$(".parent > .child")

以上选项将选择直系子女，但不选择子女的子女

看看这个演示：
您实际要选择哪些元素？我希望
$（this）.parents（“div.imggallery>div”）
只选择
thumbdiv
，它是单击的锚的父对象。哎呀……我忘了特别提到这一点。我提到了，但它没有向前推进。我正在尝试选择mainimgdiv类的div，它是div.imggallery的子类。它实际上也是第一个孩子，所以我想如果我指定它，它会选择它，或者如果我要求所有的孩子都是div，它会列为它的孩子之一。但你并没有要求imggallery所有的孩子。请看我的答案。div.maingdiv是div.imggallery的直系子。就在它的正下方，事实上是第一个孩子。Dreamweaver甚至将其结构化为它的直接孩子。或者，至少我很确定这是一个直接的孩子。这是一个很好的解释，我的头痛消失了，取而代之的是一个刚刚点击的灯泡，哈哈。非常感谢你！我觉得自己很愚蠢，但松了一口气……不过我还在学习，所以我想我得到了一张免费通行证。最后，我使用了.find选择器和.parents选择器，比如[$（this.parents（“div.imggallery”）.find（“img.mainimg”）]这样就行了，但是使用.closest看起来可能更干净，所以我要更改它。再次非常感谢您！
。closest（）
几乎总是比
.parents（）
更符合逻辑的选择，因为（以我的经验，无论如何）想要同时选择树中不同级别的多个祖先是很少见的。请注意，
.closest（）
只向上导航，它不会选择附近的兄弟姐妹或任何东西，即使“closest”这个词这意味着它可能会。顺便问一下，你的页面上有多个图像库吗？如果没有，你就不需要到处乱搞这些
.closest（）.find（）
的东西，你可以直接用
$（“.mainimgdiv”）
选择div。有趣的是，你应该提到图像库^-^整个事情过去都是这样的（习惯于今天早些时候的意思）实际上使用id是因为在任何给定的页面上只有一个图库。但是，我意识到在一个页面上，它可能会被多次使用@。@因此我不得不重做、返工并重新考虑几件事。我想我现在已经让它工作了一些，但它正在将mainimg设置为.each func的最后一个缩略图这应该是第一个缩略图…但这是另一个问题：p