jQuery - 根據類名稱添加html

有沒有辦法根據某個類名添加一些html並將其注入特定位置。下面的代碼顯示了我正在嘗試做什麼，但這是明顯的硬編碼，我想用jQuery動態地執行它。jQuery - 根據類名稱添加html

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

}）;

來源

2012-03-07 user1254333

試着改變你的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>');

來源

2012-03-07 10:13:58

哇！這很快，它是注入圖像很好。無論如何，我真正想要做的就是不僅注入圖像，還要注入像這樣的東西： – user1254333 2012-03-07 10:22:25

if（$（'ul.status li'）。hasClass（'blue'））{ \t \t $ （）.empty（）。html（''）; \t} – user1254333 2012-03-07 10:22:58

不用擔心，我已經更新了答案，向您展示瞭如何「添加」。使用'html（）'函數將基本上替換已有的內容並清除「正在進行」文本。所以我建議使用'append（）'來代替。 – 2012-03-07 10:24:09

也許是這樣的？

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

來源

2012-03-07 10:15:36 ThdK

我想你應該嘗試 $（「span.current階段」）HTML（ ''）。或者你也可以使用.append方法。

來源

2012-03-07 10:15:43

請注意，您只能使用CSS的相同的結果：

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

來源

2012-03-07 10:16:10 odupont

那麼我將如何顯示它並注入我的圖像？那將不會顯示任何東西。 – user1254333 2012-03-07 10:38:29

有了這個解決方案，你不需要jQuery代碼。當li沒有藍色類時，CSS自動隱藏span.current-stage。 – odupont 2012-03-07 11:15:04

jQuery - 根據類名稱添加html

回答

相關問題