Question

<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>

在上面的jquery代码中，我想<div class="icon abc_badge"></div>每个div有一个类badge。总之，我希望每个div的第一个孩子都引用$(this)。

感谢。

Answer 1

您可以在此处应用 .find() ，因此请使用：

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

而不是：

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

<强> Fiddle Demo

Answer 2

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

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

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

来自https://api.jquery.com/children/

Answer 3

您可以这样使用：

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

Answer 4

使用下面的孩子，如下：

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

或致电first()

上的children()

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

Answer 5

似乎你需要outerHTML：

演示：http://jsfiddle.net/w3Js2/1/

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

Answer 6

看一下jQuery.find() code here似乎.find()已翻译成jQuery Selector Context ..

此规范有效

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

Demo Fiddle

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

6 个答案: