如何在jquery中使用$（this）获取元素的第一个子元素？

<div id="idname">
<div class="badge">
  <div class="icon abc_badge"></div>
  <div class="badges_info">
   <h4>some text</h4>
  </div>
 </div>
<div class="badge">
  <div class="icon xyz_badge"></div>
  <div class="badges_info">
   <h4>some more text</h4>
  </div>
 </div>
</div>

<script>
    $(document).ready(function() {
        $(".badge").click(function () {
            var a = $(this+':first-child');
            var iconDiv = a.html();
            alert(iconDiv);
        });
    });
</script>

In above jquery code I want <div class="icon abc_badge"></div> of each div having class badge. In short I want first child of each div this reference to $(this) .

在上面的jquery代码中,我想要每个具有类徽章的div的

。总之,我想要每个div的第一个孩子这个引用$(this)。

Thanks.

6 个解决方案

#1

You can apply .find() here, so use:

你可以在这里申请.find(),所以使用:

var a = $(this).find(':first-child');

instead of:

var a = $(this+':first-child');

Fiddle Demo

#2

You can use children() in combo with first().

您可以在first()的组合中使用children()。

$(this).children().first()

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

.children()方法与.find()的不同之处在于.children()只沿DOM树向下移动一个级别,而.find()可以遍历多个级别以选择后代元素(孙子等)。

From https://api.jquery.com/children/

#3

Use children nth child like below :

使用下面的孩子nth孩子:

<script>
    $(document).ready(function(){
        $(".badge").click(function () {
            var a = $(this).children(':nth-child(0)');
            var iconDiv = a.html();
            alert(iconDiv);
        });
    });
</sctipt>

OR call first() on children()

或者调用first()on children()

<script>
        $(document).ready(function(){
            $(".badge").click(function () {
                var a = $(this).children().first();
                var iconDiv = a.html();
                alert(iconDiv);
            });
        });
    </sctipt>

#4

It seems you need the outerHTML:

看来你需要outerHTML:

Demo: http://jsfiddle.net/w3Js2/1/

$(".badge").click(function () {
    var $a = $(this).find(':first-child');
    var h = $a[0].outerHTML;
    alert(h);
});

#5

You can use like this:

你可以像这样使用:

$(document).ready(function()
{
    $(".badge").click(function () {
        var a = $(this).find(':first-child');
        var iconDiv = a.text();
        alert(iconDiv);
    });
});

#6

Having a look at jQuery.find() code here it seems that .find() is then translated in jQuery Selector Context..

看看jQuery.find()代码,似乎.find()然后在jQuery Selector Context中被翻译。

This Code works

本规范有效

var a = $(':first-child',this);

Demo Fiddle

#1