jquery - 单击其他 div 的图像时访问 JQuery 中的内容

Question

我的 HTML 如下所示：

<div class="wrapper1">
    <div class="field1"></div>
    <div class="field2">
        <img src="" />
    </div>
    <div class="field3">
        <div class="content">Lorum Ipsum</div>
    </div>
</div>

我想.field3在点击.field2 img. 我想用最少的代码做到这一点......

$('.wrapper1 img').click(function(){
    var desc = $(this).find('.field3').html();
    console.log(desc);
});

但由于某种原因，我得到一个空对象。当然，这是有道理的（因为它正在寻找 -元素field3内部this（在这种情况下是图像），但是我如何在 JQ 中解决这个问题？

Answer 1

$('.wrapper1 img').click(function(){
    var desc = $(this).parent().siblings('.field3').html();
    console.log(desc);
});

Answer 2

find将查找单击元素的后代，但 field3 不是后代。您可以直接访问它：

$('.wrapper1 img').click(function(){
    var desc = $('.field3').html();
    console.log(desc);
});

或者导航到父级，然后使用 find：

$('.wrapper1 img').click(function(){
    var desc = $(this).closest('.wrapper1').find('.field3').html();
    console.log(desc);
});

field3请注意，第二种方式会比较慢，因为您将在层次结构中导航，但如果您有多个类元素并且想要选择与单击的元素在同一wrapper1元素中的元素，这将很有帮助。img

Answer 3

尝试

$('.wrapper1 img').click(function(){
    var desc = $(this).parents(".wrapper1").children('.field3').html();
    console.log(desc);
});