Jquery Loop through list and replace

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?

user113716 · Accepted Answer · 2011-07-05 17:16:23Z

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/

edited Jul 5, 2011 at 17:16

answered Jul 5, 2011 at 17:09

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLaks · Accepted Answer · 2011-07-05 17:09:17Z

1

You forgot to call the text() function:

$('.status').text() == ...

Your code checks whether the function itself is equal to 'Not Complete'.

answered Jul 5, 2011 at 17:09

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

tkm256 · Accepted Answer · 2011-07-05 17:10:03Z

0

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

answered Jul 5, 2011 at 17:10

tkm256

5001 gold badge4 silver badges14 bronze badges

Comments

BonyT · Accepted Answer · 2011-07-05 17:14:29Z

0

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' />');
      });
 });

answered Jul 5, 2011 at 17:14

BonyT

11k5 gold badges34 silver badges53 bronze badges

Comments

streetwarrior · Accepted Answer · 2011-07-05 17:27:06Z

0

<script>
$(".status").each(function()
{
    if($(this).text() == "Not Complete")
    {
        $(this).html("<img src='loading.gif' />");
    }
});

</script>

Maybe give this a try

answered Jul 5, 2011 at 17:27

streetwarrior

213 bronze badges

Comments

Robin · Accepted Answer · 2011-07-05 17:34:42Z

0

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/

answered Jul 5, 2011 at 17:34

Robin

1464 bronze badges

Collectives™ on Stack Overflow

Jquery Loop through list and replace

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related