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>

Итак, по сути, я хочу сделать;если class = "blue", то добавьте это в 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

Обратите внимание, что вы можете использовать только CSS для того же результата:

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

Answer 3

я думаю тебе стоит попробовать $ ( "Span.current стадии") HTML ( ''); или вы также можете использовать метод .append.

Answer 4

Может как то так?

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