我必須遍歷一個 ol，然后獲取每個 li，然后洗掉文本并向其中添加“<a”元素。以下是呈現的 html：
<ol class="progress">
<li class="list-group-item text-muted list-group-item-success active">
General Information<span>1</span>
</li>
</ol>
我想洗掉除“活動”之外的所有類，然后用一般資訊包裝文本，如下所示
<ol class="progress">
<li class="active">
<a href="#">General Information<span> 1</span></a>
</li>
</ol>
我嘗試使用下面的腳本遍歷 Ol，但似乎什么也沒找到
$('ol.progress').each(function (i, li) {
var listItem = li;
var lm = $(li).text();
console.log(lm);
});
uj5u.com熱心網友回復：
如您所見，使用 jquery，我檢查元素是否具有類，然后洗掉所有類并添加活動（如果有）。
$('ol.progress li').each(function(i, li) {
var listItem = li;
if ($(li).hasClass('active')) {
$(li).removeAttr('class');
$(li).addClass('active');
} else {
$(li).removeAttr('class');
}
});.active {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="progress">
<li class="list-group-item text-muted list-group-item-success active">
General Information<span>1</span>
</li>
<li class="list-group-item text-muted list-group-item-success">
General Information<span>2</span>
</li>
<li class="list-group-item text-muted list-group-item-success">
General Information<span>3</span>
</li>
</ol>在您的代碼中，您忘記li了選擇器，$('ol.progress li')而不是$('ol.progress')
uj5u.com熱心網友回復：
使用香草js：
document
.querySelectorAll('ol.progress > *') // all children of <ol> with class .progress
.foreach(elem => {
elem.className = 'active'
elem.innerHTML = `<a href="#">${elem.innerHTML}</a>`
})
uj5u.com熱心網友回復：
我看到您正在使用 JQuery - 所以讓我們堅持這一點。
你正在回圈，ol但你想回圈ols li。所以更換
$('ol.progress').each....
經過
$('ol.progress li').each....
.removeClass()您可以使用不帶任何引數的 洗掉所有類。但是當你想保留active-class 你必須保留這個屬性 - 在我的代碼版本中（見下文）我將為此使用一個變數。
此外，您想替換 H??TML 部分而不是文本部分 - 因此您的代碼段將顯示為
$('ol.progress li').each(function () {
var is_active = false;
is_active = $(this).hasClass('active');
$(this).removeClass();
if(is_active){
$(this).addClass('active');
}
var newcontent = '<a href="#">' $(this).html() "</a>";
$(this).html(newcontent);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/469211.html
標籤：javascript jQuery