CODEWITHSUNDEEP
javascriptjqueryhtmlreplacewith
FlipFloop
FlipFloop

Reputation: 1264

jQuery removes Font Awesome Icon

I am using Font Awesome and jQuery in an experiment, after an animation, the jQuery replaces a loading icon in a list by a check, and the text changes too. However, when I remove the jQuery replaceWith method, the icon stays:

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);

Result:

before:

enter image description here

After jQuery replaceWith

enter image description here

What is the problem?

Upvotes: 5

Views: 4874

Answers (4)

Moby&#39;s Stunt Double
Moby&#39;s Stunt Double

Reputation: 2550

Change out this:

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

With this:

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

In reality though, FlipFloop, you'll want to target your <i> element and text separately. Put your message into a span you can target independently of your markup replacement, like so:

<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");

Hope this helps.

Upvotes: 4

stark
stark

Reputation: 2256

Try the following snippet :

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

Wrap the text in a span and then change it since replaceWith will replace the complete contents of the li including the icon.

Upvotes: 1

Zolt&#225;n Tam&#225;si
Zolt&#225;n Tam&#225;si

Reputation: 12809

The problem is that you replace the complete LI node instead of the inner text node inside it. To be able to address the text, wrap it in a SPAN like this.

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

Then you can change only the text you want like this.

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);

Upvotes: 4

Mark Eriksson
Mark Eriksson

Reputation: 1475

Ah it's because you have i elements inside your li elements

So you'll need to make jQuery prepend an i element after changing the text

So .replaceWith and .text will get rid of the i

So you could do this

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

Upvotes: 2

Related Questions