jQuery - add html based on class name

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

});

Goran Mottram · Accepted Answer · 2012-03-07 10:21:54Z

2

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

edited Mar 7, 2012 at 10:21

answered Mar 7, 2012 at 10:13

Goran Mottram

6,30428 silver badges41 bronze badges

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

3 Comments

user1254333 Over a year ago

Wow! that was fast and it is injecting the image fine. Howver, what i would really like to do is inject not only the image, but the span also, something like this:

user1254333 Over a year ago

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

Goran Mottram Over a year ago

No worries, I've updated the answer to show you how to "add". Using the html() function will basically replace what's already there and clear your In Progress text. So I'd suggest using append() instead.

ThdK · Accepted Answer · 2012-03-07 10:15:36Z

0

Maybe something like this?

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

answered Mar 7, 2012 at 10:15

ThdK

10.7k23 gold badges79 silver badges104 bronze badges

Comments

Amritpal Singh · Accepted Answer · 2012-03-07 10:15:43Z

0

I think you should try $("span.current-stage").html(''); or you can also use .append method .

answered Mar 7, 2012 at 10:15

Amritpal Singh

1,7851 gold badge13 silver badges20 bronze badges

Comments

odupont · Accepted Answer · 2012-03-07 10:16:10Z

0

Note that you can use only CSS for the same result :

ul.status li.blue span.current-stage {
  display: inline-block;
}
ul.status li span.current-stage {
  display: none;
}

answered Mar 7, 2012 at 10:16

odupont

1,98613 silver badges16 bronze badges

2 Comments

user1254333 Over a year ago

So how would i show it and inject my image? That will just not display anything.

odupont Over a year ago

With this solution, you don't need jQuery code. The CSS automatically hides the span.current-stage when the li doesn't have the blue class.

Collectives™ on Stack Overflow

jQuery - add html based on class name

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related