在jQuery中循环使用ol并删除类和文本

snowflakes74 • 3 年前 • 1169 次点击

我必须循环一个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>

我想删除除“active”之外的所有类,然后用一般信息包装文本就像下面

<ol class="progress">
  <li class="active">
   <a href="#">General Information<span>&nbsp;1</span></a>
  </li>
</ol>

我试着使用下面的脚本来遍历Ol,但它似乎什么也找不到

$('ol.progress').each(function (i, li) {
 var listItem = li;
 var lm = $(li).text();
 console.log(lm); 
});

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/133388

1169 次点击

文章 [ 3 ] | 最新文章 3 年前

• 1 楼

Matthias Radde 3 年前

我看到您正在使用JQuery——所以让我们坚持这一点。

你在绕圈子 ol 但你想绕过去 ol 是的 li s 所以,替换

$('ol.progress').each....

通过

$('ol.progress li').each....

可以使用 .removeClass() 没有任何参数。但既然你想保留 active -类你必须保留这个属性——在我的代码版本(见下文)中,我将为此使用一个变量。

此外,您希望替换HTML部分,而不是文本部分,这样您的代码片段就可以读取

$('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);
});

• 2 楼

Vladyslav Yukhanov 3 年前

香草js:

document
  .querySelectorAll('ol.progress > *') // all children of <ol> with class .progress
  .foreach(elem => {
    elem.className = 'active'
    elem.innerHTML = `<a href="#">${elem.innerHTML}</a>`
  })

• 3 楼

Simone Rossaini 3 年前

如您所见,使用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')

登录后回复