Question

I’m trying to find a way to loop through a list with Jquery, and if a certain class has text of “Not Complete”, replace the words “Not Complete” with a animated gif.

Here’s the list:

<ul>
<li class="name">Name</li>
<li class="job">This</li>
<li class="status">Not Complete</li>
</ul>

The list is populated via a php script.

I tired this from another example here, but couldn’t get it to work:

function change(){
if($('.status').text=='Not Complete')
{$('.status').replaceWith('<img src='loading.gif' />');}
else{}
}

$(function() {
  $(".status").each(change);
});

Any idea’s of how I could get this working?

Answer 1

If the .status elements just have short text snippets (not long paragraphs of text), it should be safe to use the contains-selector^[docs].

$('li.status:contains(Not Complete)').html("<img src='loading.gif' />");

---

Notice that I alternated the quotation marks in the HTML. You used only single quotes, which was terminating the string prematurely.

I also added the element-selector^[docs] since :contains() is not a standard selector. This will speed things up because now it will only have to look at <li> elements.

---

Working example: http://jsfiddle.net/PahVB/1/