web-dev-qa-db-ja.com

この子にクラスを追加します

このコードは機能していません。 this+'>a'は有効な構文ではありません。では、どうすればthisの子のクラスを追加/削除できますか？この場合、a要素。

 jQuery(function ($) {
        $("nav.menu>ul>li").hover(
            function () {
               $(this+'>a').addClass("hover_triangle");//error
            },

            function () {
               $(this+'>a').removeClass("hover_triangle");//error
            });
    });

できませんnav.menu>ul>li>aメニュー内のすべてのa要素を選択するため。

jqueryaddclass
11
user1311784
$(this).children('a').addClass('hover_triangle');

そして完全なコードで：

jQuery(function($) {
    $('nav.menu>ul>li').hover(function() {
       $(this).children('a').addClass('hover_triangle');
    },function() {
       $(this).children('a').removeClass('hover_triangle');
    });
});
21
inhan

.find()を使用できます

_$(this).find('> a').addClass("hover_triangle");
_

これは、_nav.menu>ul>li_の直接の子要素にのみアクセスします

CHECK FIDDLE

直接の子を選択したい場合は、.find('a')はネストされたアンカーも取得します。これを回避するには、.find('> a')または.children('a')のいずれかを使用する必要があります。

2
Sushanth --

$('a', this)を使用すると、thisオブジェクトの内部のみを確認できます。

jQuery(function ($) {
    $("nav.menu>ul>li").hover(
        function () {
           $('a', this).addClass("hover_triangle");//error
        },

        function () {
           $('a', this).removeClass("hover_triangle");//error
        });
});
2
Brombomb

$(this).find('a').addClass('hover_triangle')-直接の子である必要がないため、より一般的な方法

1
Reflective

thisの子孫を検索する方法は2つあります。ほとんどがfind()（そして読みやすい）で応答しましたが、jqueryセレクターはcontextである2番目の引数を持つこともできます。

$('a', this)は別の構文であり、$(this).find('a)と同じです。内部的には、jQueryは最初のケースを取り、とにかくfind()を使用しますが、構文は有効であり、多くの人がそれを使用します

API参照：jQuery（セレクター[、コンテキスト]）

1
charlietfl