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

也许是这样的？

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

Answer 3

我想你应该试试 $（ “span.current阶段”）HTML（ ''）。或者您也可以使用.append方法。

Answer 4

请注意，您只能使用CSS获得相同的结果：

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

jQuery - 根据类名添加html

4 个答案: