Javascript 选择无序列表中链接范围内的文本。。。然后更换它

以下是我关注的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>

---

但是它没有正确地选择元素。按照我设置javascript的方式（比这多得多），我需要保留这些变量。但是，似乎这些变量中的某些未正确设置，或者我的

$（navSpan）.contents（）.replaceWith（）

命令未正确设置。你们有没有办法解决这个问题？谢谢

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

$(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

更快。如果您有多个适用于此的菜单，则忽略，但如果没有，则速度会快一点

---

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

$(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

更快。如果您有多个适用于此的菜单，则忽略，但如果没有，则速度会快一点

---

hasClass

返回一个布尔值。如果要筛选元素，可以使用

filter

方法：

li.find（'a'）.filter（.top”）

contents

返回元素的

childNodes

，不能对返回的值调用jQuery方法

$('nav > ul').find('a.top span').text(' -');

---

hasClass

返回一个布尔值。如果要筛选元素，可以使用

filter

方法：

li.find（'a'）.filter（.top”）

contents

返回元素的

childNodes

，不能对返回的值调用jQuery方法

$('nav > ul').find('a.top span').text(' -');

---

hasClass

返回一个布尔值。不应

$（顶部）。子项（'span'）be
$（“a>.top”）.children（'span'）？@未定义，那么如何修复它？@Michał否，因为我选择的是变量top，而不是类。我这样做是对的，不是吗？
hasClass
返回一个布尔值。不应该
$（top）。children（'span'）be
$（“a>.top”）.children（'span'）？@未定义，那么如何修复它？@Michał否，因为我选择的是变量top，而不是类。我做得对，不是吗？“它破坏了我的密码”。。。请解释，您在控制台中遇到了什么错误。F12要启动开发人员工具，错误会自动记录到控制台中。我没有收到任何错误，我已经包含了一个JSFIDLE，其中包含了您提供的HTML和上面的jQuery，效果很好。我们需要提供更多的代码。正如我所说，使用您提供的HTML和我在回答中详细介绍的jquery，我没有收到错误。您可以在我的答案中提供的JSFIDLE中看到自己的情况。好的，首先，您需要实际加载jQuery（我已经更新了JSFIDLE以实现此=>）。第二，当物品是可移动的时，你只有一个与“top”类的链接……没关系，我知道问题出在哪里了。您正在将
top
声明为函数内部的变量，然后尝试在其他函数中访问它。这是一个范围问题。在顶层创建变量，然后只在函数中分配它。然后，您将能够在不同的函数中访问该变量的值。“它破坏了我的密码”。。。请解释，您在控制台中遇到了什么错误。F12要启动开发人员工具，错误会自动记录到控制台中。我没有收到任何错误，我已经包含了一个JSFIDLE，其中包含了您提供的HTML和上面的jQuery，效果很好。我们需要提供更多的代码。正如我所说，使用您提供的HTML和我在回答中详细介绍的jquery，我没有收到错误。您可以在我的答案中提供的JSFIDLE中看到自己的情况。好的，首先，您需要实际加载jQuery（我已经更新了JSFIDLE以实现此=>）。第二，当物品是可移动的时，你只有一个与“top”类的链接……没关系，我知道问题出在哪里了。您正在将
top
声明为函数内部的变量，然后尝试在其他函数中访问它。这是一个范围问题。在顶层创建变量，然后只在函数中分配它。然后，您将能够在不同的函数中访问该变量的值。