2

次のようなHTMLマークアップがあります

<ul>
  ...

    <li>
      <ul class="x">
        ...
        <a href="#"...

ul.xリンクにフックされたクリックイベントから親要素を取得するにはどうすればよいですか?

this.parentNodeULが親要素である場合は機能しますが、それがthis.parentNode.parentNode親要素の数に応じて使用する必要がある祖先の1つである場合...

どうにかして最初の UL 親を取得できますか?

4

5 に答える 5

4

質問にjQueryのタグを付けたので：

$(this).closest("ul"); //Get the first ancestor `ul`
$(this).closest("ul.x"); //Get the first ancestor `ul` with class `x`

または、jQuery を使用しない場合 (例では jQuery を使用していないように見えるため):

var node = this;
while(node.tagName !== "UL") {
    node = node.parentNode;
}
于 2012-05-03T12:48:53.533 に答える
2

使用してclosest()ください。これにより、指定したセレクターに一致する最も近い祖先が取得されます。

$(function(){
    $('a').on('click',function(){         //handler of your <a>
        var ulx = $(this).closest('ul.x'); //find the closest ancestor <ul> with class "x"
    });
});
于 2012-05-03T12:44:52.323 に答える
1

ul.xこれを使用する直接の親である場合a:

    $('a').on('click',function(){
        var ul = $(this).parent('ul.x');
    });

また

    $('a').on('click',function(){
       var ul = $(this).closest('ul.x');
    });
于 2012-05-03T12:45:36.330 に答える
1

通常、次のように使用します.closest()。

$('a').click(function(){    
   var ul = $(this).closest('ul.x'); //or just closest('ul') in case you only used the x for demo purposes
});

これは DOM ツリーを上って行き、最初の一致 (あなたのul.x要素) で停止します。

于 2012-05-03T12:45:48.203 に答える
1

パフォーマンスのために、

以下のようにjqueryを使用することもできます.jquery eventObjectにはdelegateTargetという名前のプロパティもあり、あなたの場合に役立ちます.

$('ul.x').on('click', 'a', function(e){


    //e.delegateTarget is the parent ul of the clicked a tag
    //e.target.id is the clicked a tag

    alert(e.delegateTarget.id); 
    alert(e.target.id);

});​

HTML:

 <ul id='a' class="x">
      <li><a id='1' href="#">A</a></li>
      <li><a id='2' href="#">B</a></li>
      <li><a id='3' href="#">C</a></li>
 </ul>

 <ul id='b' class="x">
      <li><a id='11' href="#">1</a></li>
      <li><a id='21' href="#">2</a></li>
      <li><a id='31' href="#">3</a></li>
 </ul>​

パフォーマンスに関しては、すべてのaタグでイベントをバインドしているわけではありません。jQuery はこの方法を提案します。

これがフィドルです。

于 2012-05-03T13:10:10.250 に答える