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

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.