0

给定下面的代码，如何在 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 -->

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

我怎样才能做到这一点？

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

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

4

9 回答 9

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

jsFiddle 示例

于 2013-01-07T05:10:53.220 回答
1

尝试这个，

$(document).ready(function() {
    $('#main-nav a').each(function () {
        if($(this).html()=='Home'){
            $(this).parent().attr('class','active');
        }
    });
});
于 2013-01-07T05:41:07.277 回答
0

你应该能够做这样的事情：

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

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

那是假设“家”永远是第一个。

于 2013-01-07T05:05:16.777 回答
0

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

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

查看选择器文档：

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

于 2013-01-07T05:07:07.403 回答
0 
$('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

也可以通过访问属性获取当前窗口的url来搜索对应的a标签。window.location.href

于 2013-01-07T05:09:51.537 回答
0

试试这个，如果你只想定位具有精确字符串“Home”的元素。

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

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

于 2013-01-07T05:22:10.373 回答
0

这是使用过滤器功能匹配链接中的确切文本的另一种方法：

http://jsfiddle.net/aWVJg/

$('#main-nav-list a').filter(
function () 
{
  return this.text === 'Home';
}).addClass('active');
于 2013-01-07T05:29:12.453 回答
-1

做这个：

$('ul#main-nav-list li:nth-child(1)').addClass('active')
于 2013-01-07T05:06:12.870 回答
-3 
$('myElement').addClass();

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

于 2013-01-07T05:05:27.207 回答