Question

此代码无效。 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元素。

Answer 1

$(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');
    });
});

Answer 2

$('a', this)允许您仅查看this对象

内部

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

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

Answer 3

$(this).find('a').addClass('hover_triangle') - 更常见的方式，因为没有必要成为直接的孩子

Answer 4

您可以使用.find()

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

这只会访问nav.menu>ul>li

的直接子元素

CHECK FIDDLE

如果您只想选择直接子项.find('a')，则会获得嵌套锚点。为避免这种情况，您需要使用.find('> a')或.children('a')

Answer 5

有两种方法可以搜索this的后代。大多数人回复了find()（并且它更容易阅读），但jquery选择器也可以有第二个arfument context。

$('a', this)是另一种语法，与$(this).find('a)相同。内部jQuery将采用第一种情况并使用find()无论如何，但语法是有效的，许多人使用它

API参考：的 jQuery( selector [, context] )

为这个孩子添加课程

5 个答案: