Question

以下是我关注的HTML：

<nav>
    <ul id='nav'>
        <li><a href="index.php" class='top'><icon><img src="images/home-icon.png"></icon>Home<span> +</span></a></li>
        <li><a href="skillsets.php"><icon><img src="images/skills-icon.png"></icon>Skillsets</a></li>
        <li><a href="gallery.php"><icon><img src="images/gallery-icon.png"></icon>Gallery</a></li>
        <li><a href="about.php"><icon><img src="images/about-icon.png"></icon>About</a></li>
        <li><a href="contact.php" style='border-right:1px solid black;'><icon><img src="images/contact-icon.png"></icon>Contact</a></li>
    </ul>
</nav>

我想选择范围内的文本 - 最好只选择范围内文本的“+”部分（没有空格）。我现在尝试这样做的方法是使用以下代码：

$(document).ready(function(){
    var ul = $('nav > ul'),
        li = ul.children('li'),
        top = li.find('a').hasClass("top"),
        navSpan = $(top).children('span');
    $(navSpan).contents().replaceWith(' -');
});

但它没有正确选择元素。通过我设置javascript的方式（其中有很多比这更多）我需要保留这些变量。但是，似乎某些变量未正确设置，或者我的$(navSpan).contents().replaceWith()命令未正确设置。你们对如何解决它有什么想法吗？谢谢！

Answer 1

首先，让我们修复您的选择器和双层包装：

$(function(){
    var ul = $('#nav'),
        li = ul.children('li'),
        top = li.find('a.top'), // you can remove the 'a' qualifier if there is never another item with the top class
        navSpan = top.children('span');

其次......你可以用以下内容替换内容：

    navSpan.text(' -');
});

最终代码：

$(function(){
    var ul = $('#nav'),
        li = ul.children('li'),
        top = li.find('a.top'),
        navSpan = top.children('span');

    navSpan.text(' -');
});

在这个例子中，我对一些不必要的变量感到畏缩，但你说你需要所有这些变量，所以我不会尝试进一步优化。

编辑：无法抗拒优化。即使您需要捕获所有这些变量，您使用id的速度也会比使用nav > li更快。如果您有多个适用的菜单，那么请忽略，但如果没有，则会更快一点。

Here is a jsFiddle of the working code.

Answer 2

hasClass返回一个布尔值。如果要过滤元素，可以使用filter方法：li.find('a').filter(".top")
contents返回元素的childNodes，不能在返回的值上调用jQuery方法。
```
$('nav > ul').find('a.top span').text(' -');
```

在无序列表中的链接内选择跨度内的文本...然后替换它

2 个答案: