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

使用find()代替attr()因为a元素不是当前元素的属性。

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

Answer 3

您可以将children或find用于此

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

注意： Children只查看节点的直接子节点，而find遍历节点下面的整个DOM，因此在给定等效实现的情况下，子节点应该更快。但是，当孩子们使用在浏览器中解释的JavaScript时，find会使用本机浏览器方法。在我的实验中，典型案例的性能差异不大。

从What is fastest children() or find() in jQuery?

复制

Answer 4

你也可以这样做：

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

Jquery：访问$（this）中的标记元素

4 个答案: