1

私は、2 つのレベルを持つ順序付けられていないリンクのリストを使用しています。

   <ul class="level-1">
      <li class="item-a"><a href="#">A</a></li>
      <li class="item-b"><a href="#">B</a>
        <ul class="level-2">
          <li class="item-1"><a href="#">1</a></li>
          <li class="item-2"><a href="#">2</a></li>
          <li class="item-3"><a href="#">3</a></li>
        </ul>
      </li>
      <li class="item-c"><a href="#">C</a></li>
    </ul>

.level-2 リンクの 1 つをクリックし、クリックしたリンクを含むリストからより高いレベルのリンクを選択したいと考えています。(たとえば、1、2、または 3 のいずれかをクリックして、B を選択します。)

クリックしたリンクが$(this).find('a')-- として選択されている場合、より高いレベルのリンクを選択するにはどうすればよいですか?

アドバイスをいただければ幸いです。

4

4 に答える 4

3

1 つの方法は、最も近い に移動し<ul>、次に最も近い に再び移動してから、<li>に戻ること<a>です。

$('a').click(function() {
    var $a = $(this).closest('ul').closest('li').find('a:first');
    // $a is the <a> you want.
});

<a>このアプローチはかなり柔軟で、DOM 構造に過度に依存することはありません。コードを壊すことなく、前後に必要なものを追加できます (もちろん、 <li>s または<ul>s を追加し始めた場合を除きます)。

これを行う方法は確かに他にもありますが、上記は非常に単純でわかりやすいので、2 番目の関心事です (最初はそれが機能するかどうかです)。

参考文献:

于 2011-07-21T05:01:06.667 に答える
2

closestと関数を組み合わせて使用​​しfindます (API リファレンスはこちらとこちら)。

 $(this).closest('ul')
        .closest('li')
        .find('a')
        .text() // Equals B if 1, 2, or 3 are clicked. 
                // Equals '' if A, B, or C are clicked.

ここに jsFiddle があります: http://jsfiddle.net/FishBasketGordo/nmunm/

于 2011-07-21T04:58:46.960 に答える
1

for your reference

$(function(){
    $("a").each(function(){
        $(this).click(function(){
            $(this).css("background-color","red");
            $(this).parents("li").children("a").css("background-color","blue");
        });
    })
})
于 2011-07-21T05:16:45.473 に答える
1

これを使用できます：

$(document).ready(function() {
    $("ul.level-2 a").click(function () {
       alert($(this).closest('ul.level-2').parent().find('a').html()); 
    });
});

サンプルの動作を確認してください: http://jsfiddle.net/znHXK/

于 2011-07-21T05:03:20.393 に答える