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'中达到那个a。（不是任何'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，因此给定等效实现的子节点应该更快。但是 find 使用本机浏览器方法，而 children 使用在浏览器中解释的 JavaScript。在我的实验中，典型情况下的性能差异不大。

复制自jQuery 中最快的 children() 或 find() 是什么？

Answer 4

你也可以这样做：

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