jquery - Jquery：$（this）内のタグ要素にアクセスする

Question

<li><a href="home.html"> Home </a> </li>
<li> <a href="contact.html">Contact </a></li>

$('li').mouseenter( function() { 
    $(this).attr('a').css("color", "red");   
});

失敗します。私はその「li」内でそれに到達する方法を理解しようとしています。（'li a'ではありません）

Answer 1

a属性ではなく要素である場合は、次のfindメソッドを使用できます。

$('li').mouseenter(function() { 
    $(this).find('a').css("color", "red"); 
    // or using $(selector, context):
    // $('a', this).css("color", "red"); 
});

ただし、JavaScriptはCSSのようには機能しません。mouseleaveイベントの色を変更する必要があります。クラスを作成し、toggleClassメソッドを使用できます。

.red {
   color: red;
}

$('li').hover(function() { 
    $(this).find('a').toggleClass('red');
});

また、CSS（より軽量で高速）を使用することもできます。

li:hover a {
    color: red;
}

Answer 2

現在の要素の属性ではなく要素であるため、attr（ ）の代わりにfind（）を使用します。a

$('li').mouseenter( function() { 
    $(this).find('a').css("color", "red");   
});

Answer 3

これにはchildrenまたはを使用できますfind

$('li').mouseenter( function() { 
    $(this).children('a').css("color", "red");   
});

注: Childrenノードの下の DOM 全体をトラバースしながら、ノードの直下の子のみを調べfindます。そのため、同等の実装が与えられた場合、子はより高速になるはずです。ただし、find はネイティブのブラウザー メソッドを使用しますが、children はブラウザーで解釈される JavaScript を使用します。私の実験では、典型的なケースではパフォーマンスに大きな違いはありません。

jQuery で最速の children() または find() は何ですか?からコピー

Answer 4

あなたもこの方法を行うことができます：

$('li').mouseenter( function() { 
   $('a', this).css("color", "red");   
});