jquery - 如何从 Jquery 中的父 div 中选择一个孩子

Question

我有以下 HTML：

<div class="a">
    <div class="b"></div>
    <div class="x"></div>
    <div class="y"></div>
    <div class="c">
        <div class="d"></div>
    </div>
</div>

当我打电话时$(".d").click(function(){，如何选择 div class .b？我想相对地做到这一点，而不使用.b类名。

Answer 1

标准做法：

$('.module').on('click', '.button', function () {
    $('.other', this)...
});

在哪里：

• .module是页面组件的最外层（包装器）元素，
• .button是您正在收听其点击动作的组件中的元素，
• .other是您在点击处理程序中选择的元素。

注意如何：

• 使用事件委托，
• 处理程序中的查询是本地的，仅限于页面组件。

另外，请注意其他答案如何在 jQuery（那些parent()和sibling()调用）中硬编码元素关系，这不是一个好方法。

Answer 2

你必须找到parent以前的sibling

$(".d").click(function(){
     $(this).parent().prev();
})

如果你想在当前父级之前设置第三个兄弟，只需附加三次 prev() ex。

$(".d").click(function(){
         $(this).parent().prev().prev().prev();
 })

Answer 3

这取决于它们的相对位置是否始终保持不变。

如果 b 始终是 d 的父级的上一个兄弟，您可以通过以下方式选择它：

$('.d').on('click', function(){
    var b = $(this).parent().prev();
});

如果 b 总是 d 的父母的父母的第一个孩子：

$('.d').on('click', function(){
    var b = $(this).parent().parent().find(">:first-child");
});

Answer 4

$(".d").click(function(){
    alert($('div[class="a"]').children(":first").text());
});

这将选择具有 b 类的元素。

现场演示

这也将起作用

$(".d").click(function(){
    alert($(this).parent().parent().children(":first").text());
});

现场演示 2

甚至这个

$(".d").click(function(){
    alert($(this).parent().prev('div').text());
});

现场演示 3

Answer 5

$(.d).click(function(){

$(this).parent().siblings('.b') //in this way
})

有很多方法可以为他们执行此操作，您可以参考 jquery 网站 http://api.jquery.com/category/selectors/

Answer 6

$(".d").click(function(){
    $(this).parent().prev('div'); // or $(this).closest('.b'); 
});

OP评论后更新

小提琴演示

$(".d").click(function(){
    $(this).parent().parent().children().first();
});

参考

.closest()

.parent()

.prev()