Question

Is there a way to add some html based on a certain class name and inject it into a specific place. The code belows shows what i am trying to do, but this is obvioulsy hard coded, i want to do it dynamically using jQuery.

<ul class="status clrfix">
<li class="green"><a href="">Completed</a><span class="arrow"></span></li>
<li class="green"><a href="">Completed</a><span class="arrow"></span></li>
<li class="blue"><a href="">In Progress</a><span class="current-stage"><img src="images/current-stage.png" /></span><span class="arrow"></span></li>
<li>Not Started <span class="arrow"></span></li>
<li class="last">Not Started <span class="arrow"></span></li>

So, essentially what i want to do is; if the class=”blue” then add this inside the li:

<span class="current-stage"><img src="images/current-stage.png" /></span>

This is what i attempted, but it’s not working:

$(document).ready(function() {  

if($('ul.status li').hasClass('.blue')){
    $("span.current-stage").empty().html('<img src="../images/current-stage.png" />');
}

});

Answer 1

Try changing your if statement to the following:

if($('ul.status li').hasClass('blue')){

The hasClass() method accepts a class name as a parameter, not a selector. So you can leave out the . on the front of the class.

Also, if you wish to add HTML to without removing what is already there, use the append() function.

$("span.current-stage").append('<span class="current-stage"><img src="../images/current-stage.png" /></span>');