jQuery

Question

我得到了如下列表：

    <li>
        <a data-id="..." data-name="..." data-vname="..." style="font-weight: 400; padding: 5px 15px; cursor: pointer;">
            <span class="badge badge-primary pull-right"><?php echo $count;?></span><i class="fa fa-fw fa-server push-5-r"></i> ...
        </a>
    </li>

现在我想为 <a> 元素做一个点击功能，它使 li class 处于活动状态，当我点击另一个对象将其从第一个对象中删除时。我的第一次尝试：

$( "a" ).click(function() {
        $( this ).prev().addClass('active');
});

如何select this() 之前的<li>？

提前致谢。

Answer 1

.prev() 方法用于获取前一个兄弟元素，在您的情况下，li 是祖先元素。

要获取直接父级（如您的情况），您可以使用 .parent(), but if you are after a parent in some levels up you can use .closest()

$( "a" ).click(function() {
        $( this ).parent().addClass('active');
        //or $( this ).closest('li').addClass('active');
});

Answer 2

或者你甚至可以做到

$( "a" ).click(function() {
      $(this).closest('li').addClass('active');
});

将它从所有其他 li 中删除并将其添加到当前 a 的 li 你可以再写一行

$( "a" ).click(function() {
      $('li').removeClass('active')//removes it from all the li
      $(this).closest('li').addClass('active');//adds it to current anchor's li
});

jQuery - 在按钮前选择 li

jQuery - Selecting li before button

javascript

selector