Reputation: 2232
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?
Upvotes: 0
Views: 742
Reputation: 146
The each function typically passes a parameter for index and object of the array you are iterating over. In your function you reselect the array each time. Try something like:
$(".status").each(function(index, value) {
if ($(this).text()=="Not Complete")
{
$(this).replaceWith($("<img />").attr("src","loading.gif"));
}
}
This is based on the jQuery documentation for the each function http://api.jquery.com/each/
Upvotes: 0
Reputation: 21
<script>
$(".status").each(function()
{
if($(this).text() == "Not Complete")
{
$(this).html("<img src='loading.gif' />");
}
});
</script>
Maybe give this a try
Upvotes: 0
Reputation: 322462
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/
Upvotes: 1
Reputation: 10940
Hmm - you need to rewrite this a little as you are currently running a loop, but then within the loop querying the collection again with if($('.status')
Try this:
$(function() {
$(".status").each(function(){
if($(this).text() == 'Not Complete'){
$(this).replaceWith('<img src='loading.gif' />');
});
});
Upvotes: 0
Reputation: 500
If the list is populated by PHP, why not just make PHP put it in there in the first place?
But if you're sticking with the jQuery, it should be text()==, not just text==.
Upvotes: 0
Reputation: 887305
You forgot to call the text()
function:
$('.status').text() == ...
Your code checks whether the function itself is equal to 'Not Complete'
.
Upvotes: 1