Question

鉴于下面的代码，如何在dom中找到以下元素？

<!-- START Main Navigation -->
<nav id="main-nav">
    <ul>
        <li>
            <a href="/">Home</a>    
            <ul>
                <li><a href="index.html">Layout 1</a></li>
            </ul>
        </li>
        <li>
            <a href="blog.html">Blog</a>
            <ul>
                <li><a href="blog.html">Blog</a></li>
            </ul>
        </li>
        <li>
        <a href="/Contact">Contact</a>
        </li>
    </ul>
</nav>
<!-- END Main Navigation -->

我想找到指向主页的链接并将class=active属性应用于它的父级 <li>

我该怎么做？

我知道这是一个简单的问题，但我只是在学习jquery。此外，代码中还有其他<li><a href="/"....，因此我需要在选择中以某种方式合并<nav id="main-nav-list">。

最后，每当我在联系人或博客中时，我都需要这样做。

Answer 1

$('#main-nav-list a').each(function () {
  if ($(this).text() == 'Home') $(this).parent().addClass('active');
});

<强> jsFiddle example

Answer 2

试试这个，

$(document).ready(function() {
    $('#main-nav a').each(function () {
        if($(this).html()=='Home'){
            $(this).parent().attr('class','active');
        }
    });
});

Answer 3

你应该可以这样做：

$('#main-nav-list li').first().addClass('active');

还有很多其他的方法，但希望这是有道理的:)

这是假设'Home'永远是第一位的。

Answer 4

有很多方法可以实现这一点，但下面的方法通过匹配链接文本来查找“主页”链接：

$('a:contains("Home")').addClass('active');

查看选择器文档：

http://api.jquery.com/category/selectors/

Answer 5

$('ul#main-nav-list li > a.active').removeClass('active'); 
//First undo the current active :)

$('ul#main-nav-list li > a[href="/"]').addClass('active');  
//Then apply to the one you want

您还可以通过访问a属性来获取当前窗口网址以搜索相应的window.location.href标记。

Answer 6

试试这个，如果您只想定位具有完全字符串“Home”的元素。

$(document).ready(function() {
  $.each($("a"), function(index, node) {
         if($(node).html() == "Home") {
           $(node).parent("li").addClass("active");
         }
  });
});

JSFiddle示例：http://jsfiddle.net/dharmavir/uqT6J/

Answer 7

以下是使用过滤功能匹配链接中的确切文本的另一种方式：

http://jsfiddle.net/aWVJg/

$('#main-nav-list a').filter(
function () 
{
  return this.text === 'Home';
}).addClass('active');

Answer 8

这样做：

$('ul#main-nav-list li:nth-child(1)').addClass('active')

Answer 9

$('myElement').addClass();

不要粗鲁，但你对jQuery有什么了解吗？看看jQuery的主页，他们解释了如何做到这一点。 API也非常有用。

如何在jquery中选择一个元素

9 个答案: