在我的页面上,div中有许多逗号分隔值,如下所示:

<div class="frequency">
Within 48 hours,Annually
</div>

<div class="frequency">
First 2 weeks,Annually
</div>

<div class="frequency">
Annually
</div>

我正在try 将每个值包装在一个SPAN标记中.我已经做到了这一点,但它只对第一个有效,然后对其余的重复相同的值:

var frequencylabels = $('.frequency').html().split(',');
$('.frequency').empty().append(frequencylabels.map(i => `<span class="label">${i}</span>`));
$('.frequency span').unwrap();

我如何才能实现这一输出?

<span class="label">Within 48 hours</span><span class="label">Annually</span>

<span class="label">First 2 weeks</span><span class="label">Annually</span>

<span class="label">Annually</span>

这是一张JSFiddle demo美元的钞票

推荐答案

循环您的类,并在循环中使用split()/append()方法.

示例:

$('.frequency').each(function(index, element) {
  var frequencylabels = $(this).text().split(',');
  $(this).empty().append(frequencylabels.map(i => `<span class="label">${i}</span>`));
  $('.frequency span').unwrap();
});
.label {
  background-color: green;
  margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frequency">
  Within 48 hours,Annually
</div>

<div class="frequency">
  First 2 weeks,Annually
</div>

<div class="frequency">
  Annually
</div>

Jquery相关问答推荐

使用 JQuery 在 span 标签中用逗号分隔页面上的文本

jQuery / Ajax - $.ajax() 将参数传递给回调 - 使用好的模式?

如何立即启动 setInterval 循环?

$(document).on('click', '#id', function() {}) 与 $('#id').on('click', function(){})

数字键盘的keyCode值?

为什么找不到我的 json 文件?

我可以使用 jQuery 打开下拉列表吗

使用 JQuery 激活 bootstrap 选项卡

$(document).on("click"... 不工作?

所有但不是jQuery Select 器

如何通过javascript数组中的键和值查找对象的索引

用作 Google Chrome 书签

如何在新窗口中打开链接?

jquery分别绑定双击和单击

删除除一个之外的所有类

jQuery位置href

通过 AJAX MVC 下载 Excel 文件

获取对象属性中的最小值/最大值的快速方法

catch forEach 最后一次迭代

使用 jQuery 检测元素内容的变化