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 に答える