JQuery 不会选择兄弟元素

标签 jquery html css

使用以下代码,我希望用户单击 li (div ul li a) 内的标签 默认情况下,第一个标签有一个类“on”。单击标签时,代码应该将 addClass('on') 添加到 'this' 并从所有其他 sibling 中删除 Class('on')。 addClass('on') 有效,但 $(this).siblings().removeClass('on') 根本不起作用。

var menu01_list = $(".profile_menu01 ul li > a");

menu01_list.click(function(){
  $(this).siblings().removeClass('on');
  $(this).addClass('on');
});

html代码:

<div class="profile_menu01">
    <ul>
        <li><a class="btn_my_pick on" href="#">My Pick</a></li>
        <li><a class="btn_my_pickpot" href="#">3<span class="alert_num"></span>My Picpot</a></li>
        <li><a class="btn_my_review" href="#">My ReView</a></li>
        <li><a class="btn_my_photos" href="#">My Photos</a></li>
    </ul>
</div>

最佳答案

您正在查看 <a> 的 sibling 元素 - 因为它们包含在 <li> 中, 没有 sibling 。您必须遍历一级直到 <li> (并退缩)在检查 sibling 之前:

menu01_list.click(function(){
   $(this).parent().siblings().children().removeClass('on');
   $(this).addClass('on');
});

或者,您可以在 li 上运行该函数:

var menu01_list = $(".profile_menu01 ul li");

menu01_list.click(function(){
   $(this).siblings().children().removeClass('on');
   $(this).children().addClass('on');
});

关于JQuery 不会选择兄弟元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48494509/

相关文章:

javascript - HTML5 Canvas 颜色

javascript - Jquery 脚本问题 IE7 添加/删除类

javascript - select2 没有滚动的太长列表使选择了错误的元素

javascript - JS/CSS : How to change z-index value after scrolling down past 1200 pixels (in height)?

jquery - 工具提示 jquery

javascript - 如何使用 JavaScript 隐藏和显示多个 Div

css - 使用 TypeScript react 如何在 Textfield Material-UI 中使用图标

jquery - 知道什么溢出:hidden has hidden

jquery - knockout : fade in after fading out something else

jquery - 如何使用数组索引对无序列表进行排序