jquery - 如何在 JQuery 中获取具有指定元素的第一个孩子？

Question

我有以下 HTML ..

<div class = "thumbnail">
  <img src = "somePath">
</div>
 <div class = "thumbnail">
  <img src = "somePath">
</div>
<div class = "thumbnail">
  <img src = "somePath">
</div>
<div class = "thumbnail">
  <a href = "someLink"><img src = "somePath"></a>
</div>
<div class = "thumbnail">
  <a href = "someLink"><img src = "somePath"></a>
</div>

我想在div.thumbnail的第一个孩子下迭代img标签。我想过滤掉它们。我用作..

var i =0;
$("div.thumbnail :first-child").each(function() {
    console.log("Touch "+(++i)+" time(s) !");
    if($(this).context.nodeName.toLowerCase() == 'img') {
        console.log("Getting Image Tag.");
    }
});

我的问题是我想过滤获取元素..

$("div.thumbnail :first-child :img").each(function(){});

我不想迭代为div.thumbnail的计数。我想迭代为第一个子标签的div.thumbnail计数是img。如何弄清楚？

Answer 1

使用:has() Selector

$("div.thumbnail:has( > img:first-child)").each(function(){});

jsFiddle 演示

Answer 2

简单的

$(".thumbnail > img").each(function(){
    //
});

这将跳过以下第一个孩子不是img

<div class = "thumbnail">
  <a href = "someLink"><img src = "somePath"></a>
</div>

小提琴

Answer 3

$(".thumbnail:has('> img:first-child'),.thumbnail > img:first-child").each(function(){
     //TO Do here
});

演示