jquery - 查找单击元素的同级元素

Question

我有以下列表结构:

<ul>
    <a class="target">one</a>
    <a class="target">two</a>
    <a class="target">three</a>
</ul>

当我点击<a>时我为单击的元素添加一个“选定”类，为其他元素添加一个“未选定”类，如下所示:

$(".target").click(){
    $(this).siblings().removeClass("selectedClass"); //remove "selected" class from siblings
    $(this).addClass("selectedClass"); //add selected class to clicked element
}

现在我的问题来了。如果我按如下方式更改列表结构(将 <a> 包装到 div 中):

    <ul>
    <div><a class="target">one</a></div
    <div><a class="target">two</a></div
    <div><a class="target">three</a></div
    </ul>

我不知道如何找到我点击的元素的同级元素(其他 <a> 元素)。

    $(".target").click(){
        // how to target the others two <a> elements to call removeClass on them?    
        $(this).addClass("selectedClass"); //add selected class to clicked element - still works
    }

Answer 1

您只是对绑定(bind)点击事件的语法感到困惑，

$(".target").click(function(){
    $(this).siblings().removeClass("selectedClass"); //remove "selected" class from siblings
    $(this).addClass("selectedClass"); //add selected class to clicked element
});

您应该在匿名函数中编写单击事件的代码。或者简单地将代码编写在单独的函数中，然后将引用传递给它。

我刚刚看到您的 html 结构，它无效。 anchor 标记不应是无序列表的直接子代。

DEMO

修改后的 HTML:

<ul>
    <li><a class="target">one</a></li>
    <li><a class="target">two</a></li>
    <li><a class="target">three</a></li>
</ul>

修改后的JS:

$(".target").click(function () {
    var parent = $(this).parent()
    parent.siblings().removeClass("selectedClass"); //remove "selected" class from siblings
    parent.addClass("selectedClass"); //add selected class to clicked element
});