jQuery删除Font Awesome Icon

Question

我在实验中使用Font Awesome和jQuery，在动画之后，jQuery通过检查替换列表中的加载图标，文本也发生了变化。 但是，当我删除jQuery replaceWith方法时，图标保持：

HTML：

<ul class="fa-ul">
        <li><i class="fa-li fa fa-spinner fa-spin" id = "ToDo1"></i>Downloading</li>
        <li><i class="fa-li fa fa-square" id = "ToDo2"></i>text</li>
        <li><i class="fa-li fa fa-square" id = "ToDo3"></i>text</li>
        <li><i class="fa-li fa fa-square" id = "ToDo4"></i>text</li>
</ul>

jQuery的：

setTimeout(function() {
    $("#ToDo1").removeClass("fa-spin fa-spinner");
    $("#ToDo1").addClass("fa-check-square");
    $("li:first").replaceWith("Download Complete");
    $("#ToDo2").addClass("fa-spin fa-spinner");
}, 2000);

结果：

之前：

在jQuery replaceWith

问题是什么？

Answer 1

问题是您替换完整的LI节点而不是其中的内部文本节点。 为了能够解决文本，请将其包装在这样的SPAN 。

<ul class="fa-ul">
    <li><i class="fa-li fa fa-spinner fa-spin" id = "ToDo1"></i><span class="download-status">Downloading</span></li>
    <li><i class="fa-li fa fa-square" id = "ToDo2"></i>text</li>
    <li><i class="fa-li fa fa-square" id = "ToDo3"></i>text</li>
    <li><i class="fa-li fa fa-square" id = "ToDo4"></i>text</li>
</ul>

然后，您只能更改所需的文本。

setTimeout(function() {
    $("#ToDo1").removeClass("fa-spin fa-spinner");
    $("#ToDo1").addClass("fa-check-square");
    $("li:first > span").text("Download Complete");
    $("#ToDo2").addClass("fa-spin fa-spinner");
}, 2000);

Answer 2

改变这个：

$("li:first").replaceWith("Download Complete");

有了这个：

$("li:first").html('<i class="fa-li fa fa-square" id = "ToDo1"></i>Download Complete');

实际上，FlipFloop，你会想要单独定位你的<i>元素和文本。 将您的邮件放入可以独立于标记替换目标的范围内，如下所示：

<li><i class="fa-li fa fa-square" id = "ToDo2"></i><span>text</span></li>


$("li:first i").removeClass("fa-spin fa-spinner").addClass("fa-check-square");
$("li:first span").text("Download Complete");

希望这可以帮助。

Answer 3

啊，因为你的li元素中有i元素

因此，您需要在更改文本后使jQuery在i元素之前添加

所以.replaceWith和.text将摆脱i

所以你可以做到这一点

$('li:first').html('<i class="your font awesome class"></i>Download Complete');

Answer 4

请尝试以下代码段：

 $(document).ready(function() { var time = 500; $('.load').each(function() { var temp = $(this); setTimeout(function() { temp.removeClass("fa-spin fa-spinner"); temp.addClass("fa-check-square"); temp.next("div").text("Download Complete"); temp.next("i.load").addClass("fa-spin fa-spinner"); }, 2000, temp); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="fa-ul"> <li><i class="fa-li fa fa-spinner fa-spin load" id="ToDo1"></i> <div>Downloading</div> </li> <li><i class="fa-li fa fa-square load" id="ToDo2"></i>text</li> <li><i class="fa-li fa fa-square load" id="ToDo3"></i>text</li> <li><i class="fa-li fa fa-square load" id="ToDo4"></i>text</li> </ul> 

裹在一个文本span ，然后改变它，因为replaceWith将替换的完整内容li包括icon 。