0

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

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

但这不是我的小脚本的结果,也许你知道一些?

问候,彼得

   $('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,因为这是具有“已选择”类的最接近的对象,如上例所示。

4

1 回答 1

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;防止气泡效应在这里很重要!

于 2011-01-15T20:29:54.560 回答