题 如何获得$(this)选择器的子节点?


我的布局类似于:

<div id="..."><img src="..."></div>

并希望使用jQuery选择器来选择子项 img 在 - 的里面 div 点击。

得到的 div,我有这个选择器:

$(this)

我怎样才能得到这个孩子 img 使用选择器?


2046
2017-11-20 19:44


起源




答案:


jQuery构造函数接受一个名为的第二个参数 context 可用于覆盖选择的上下文。

jQuery("img", this);

哪个与使用相同 .find() 喜欢这个:

jQuery(this).find("img");

如果你想要的imgs是 只要 点击元素的直接后代,你也可以使用 .children()

jQuery(this).children("img");

2690
2017-11-20 21:27



它的价值是什么:jQuery(“img”,this)在内部转换为:jQuery(this).find(“img”)所以第二个更快一点。 :) - Paul Irish
谢谢@Paul,我担心使用find()了 错误,结果证明这是唯一的方法;) - Agos
如果节点是直接子节点,那么只需执行$(this).children('img'); ? - adamyonk
@adamyonk事实上没有,至少如果这是什么可以通过: jsperf.com/jquery-children-vs-find/3 - Simon Stender Boisen
我看到与@PaulIrish在这个例子中所说的完全相反 - jsperf.com/jquery-selectors-comparison-a   。任何人都能解释一下吗?要么我的测试用例错了,要么jquery在过去的4年中改变了这种优化。 - Jonathan Vanasco


你也可以使用

$(this).find('img');

这将返回所有 imgs是后代的 div


445
2017-11-20 21:23



在一般情况下,似乎 $(this).children('img') 会更好。例如 <div><img src="..." /><div><img src="..." /></div></div> 因为大概是用户想要找到第一级的imgs。 - Buttle Butkus


如果你需要第一个 img 你可以做到的只是一个级别

$(this).children("img:first")

127
2017-07-21 18:47



是否 :first 只匹配“只有一个级别“,还是匹配 该 “第一”  img 发现了什么? - Ian Boyd
@IanBoyd, .children() 是“完全一个级别”来自和 :first 是“第一”来自哪里。 - Tyler Crompton
@IanBoyd,该元素将被解释为。它只适用于您使用的情况 .find() 代替 .children() - Tyler Crompton
如果你正在使用:首先使用.find()小心,jQuery似乎找到所有后代然后返回第一个元素,有时非常昂贵 - Clarence Liu
@ButtleButkus在这个问题上, this 已经提到了 <div> 含有 <img>但是,如果您有多个级别的标记来从您所参考的引用遍历,那么您绝对可以组成多个标记 children() 呼叫 - rakslice


如果您的DIV标记后面紧跟IMG标记,您还可以使用:

$(this).next();

70
2018-06-21 13:25



.next()非常脆弱,除非你总能保证元素将成为下一个元素,否则最好使用不同的方法。在这种情况下,IMG是div的后代,而不是兄弟。 - LocalPCGuy
OP在div中明确要求一个孩子img。 - Giorgio Tempesta


直接 孩子是

$('> .child', this)

56
2017-07-16 20:07



这个答案可能具有误导性,因为没有带有“子”类的元素,所以它不起作用。 - Giorgio Tempesta


您可以在下面找到父div的所有img元素

$(this).find('img') or $(this).children('img')

如果你想要特定的img元素,你可以像这样写

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

你的div只包含一个img元素。所以对于这个,下面是正确的

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

但是如果你的div包含更多img元素,如下所示

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

那么你不能使用高位代码来找到第二个img元素的alt值。所以你可以尝试这个:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

此示例显示了如何在父对象中查找实际对象的一般概念。 您可以使用类来区分子对象。这很简单有趣。即

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

你可以这样做:

 $(this).find(".first").attr("alt")

更具体的是:

 $(this).find("img.first").attr("alt")

您可以使用上面代码中的查找或子项。更多访问儿童 http://api.jquery.com/children/ 并找到 http://api.jquery.com/find/。 见例子 http://jsfiddle.net/lalitjs/Nx8a6/


37
2018-03-22 08:05





在不知道DIV的ID的情况下,我认为你可以选择这样的IMG:

$("#"+$(this).attr("id")+" img:first")

29
2017-11-20 19:56



这可能实际上有效,但有点Rube Goldberg回答:) - Scott Evernden
如果你打算使用那个代码,至少要做:$(“#”+ this.id +“img:first”) - LocalPCGuy
@LocalPCGuy你的意思是: “如果您打算使用该代码 寻求帮助“ - gdoron
如果'this'已经选择了实际的div,你为什么要这样做呢?此外,如果div没有id,则此代码将不起作用。 - Giorgio Tempesta


在jQuery中引用一个孩子的方法。我在以下jQuery中总结了它:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

28
2018-01-25 10:51





试试这段代码:

$(this).children()[0]

27
2017-11-20 19:51



虽然它返回一个dom元素而不是一个jq对象,但它会工作 - redsquare
我不知道它是否是当前情况的最佳方法,但是如果你想走这条路并仍然以jQuery对象结束,那就用它包装: $($(this).children()[0])。 - patridge
甚至更容易 $(this:first-child) - rémy
代替 $($(this).children()[x]) 使用 $(this).eq(x) 或者如果你想要第一个,只是 $(this).first()。 - Cristi Mihai
@rémy:这甚至都不是有效的语法。 (花了两年的时间让任何人注意到......) - BoltClock♦


您可以使用以下任一方法:

1找(): 

$(this).find('img');

2个孩子(): 

$(this).children('img');

19
2017-08-14 11:29





jQuery的 each 是一种选择:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});

17
2018-06-26 07:42