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类.b？我想相对地这样做，而不使用.b类名。

Answer 1

标准方法：

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

其中：

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

请注意：

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

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

Answer 2

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

OP发表评论后更新

fiddle DEMO

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

参考

.closest()

.parent()

.prev()

Answer 3

您必须找到parent之前的sibling

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

如果要在当前父级之前设置第三个兄弟，只需追加三次prev（）离。

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

Answer 4

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

如果b总是成为父母之前的兄弟姐妹，你可以选择以下内容：

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

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

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

Answer 5

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

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

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

Answer 6

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

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

Live Demo

这也可行

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

Live Demo 2

即便如此

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

Live Demo 3

如何从Jquery中的父div中选择一个子节点

6 个答案: