jQuery - クラス名に基づいてHTMLを追加

Question

特定のクラス名に基づいていくつかのHTMLを追加し、特定の場所に挿入する方法はありますか？コードは私が何をしようとしているのかを示していますが、これはハードコードされているので、動的に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> 

ので

、基本的に私は何をしたいです。クラス= "青" はその後、李内にこれを追加した場合：

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

これは私が試みたものですが、それは働いていない：

$(document).ready(function() { 

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

}）;

Answer 1

を次のようにif文あなたを変更してみてください：

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

hasClass()メソッドは、パラメータ、ないセレクタとしてクラス名を受け入れます。だから、クラスの前に.を残すことができます。

また、すでにあるものを削除せずにHTMLを追加する場合は、append()機能を使用してください。

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

Answer 2

多分このようなものでしょうか？

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

Answer 3

私はあなたが $（ "span.current段階"）を試みるべきだと思いHTML（ ''）; または.appendメソッドを使用することもできます。あなたが同じ結果のためにのみCSSを使用することができます

Answer 4

注：

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