jquery 最接近的函数无法与 addClass 一起使用

Question

我对 jquery 最接近的函数有问题。 我想制作一个菜单，您可以在其中单击多个项目。 我想知道的是： 如果有人单击菜单中已选定的项目，则刚刚取消选择的项目前面是否有选定的项目。 我找到了最接近的函数，如果存在与选择器匹配的 dom 对象，则返回 1；如果不存在，则返回 0。 因此，我添加为每个单击的菜单项选择的类，并在再次单击时将其删除。

当您单击menu_2，然后单击menu_3，然后再次单击menu_3时，最接近的值应该是1，因为在我刚刚取消选择的项目前面有一个选定的项目。

但这不是我的小脚本的结果，也许你知道一些事情？

问候， Peter

   $('li').click(function()
     {
      if ($(this).hasClass('selected'))
      {
       $(this).removeClass('selected');
       alert($(this).closest('.selected').size());
      }
      else
      {
       $(this).addClass('selected');
      }
   });

---

  .selected
  {
   background-color: red;
  }

---

<ul>
<li>menu_1</li>
<li>menu_2</li>
<li>menu_3</li>
<li>menu_4</li>
<li>menu_5</li>
</ul>

这是我的结构：

menu_0 <- selected
 menu_0_0
 menu_0_1
 menu_0_2 <- selected
   menu_0_2_0
   menu_0_2_1 <- selected
menu_1
...

现在我取消选择menu_0_2_1，并且最接近的函数应该给我DOM对象menu_0_2，因为这是具有“selected”类的最接近的对象，如上例所示。

Answer 1

您对 closest() 的用途感到困惑：

获取第一个祖先元素
匹配选择器，从
当前元素和进展
通过 DOM 树。

如果您也想获取兄弟姐妹，请使用 siblings()，如果您想立即使用 next() ..etc：

$(document).ready(function() {
    $('li').click(function() {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            alert('Closest: ' + $(this).closest('.selected').length);
            alert('Siblings: ' + $(this).siblings('.selected').length);
        }
        else {
            $(this).addClass('selected');
        }
        return false;
    });
});

示例链接。 return false; 在这里很重要，可以防止气泡效应！