JQuery循环切片（），拆分（）和包装数组......对于类的每个元素

Question

我很确定我很接近这个，但我似乎无法做到这一点。我为列出的每个事件动态获取以下字符串，格式始终相同。基本上需要将每个条目的日期拆分（）并仅返回时间，这些时间在“，”处拆分（）并以跨度呈现 这就是我所拥有的：

<div class="date">Di 22.10.2014 um 14:00, 18:00</div>
<div class="date">Di 22.10.2014 um 14:00, 18:00, 20:00 </div>

和

var data =$('.date').html().slice(17);
var arr = data.split(',');
$(".date").empty();
$.each(arr, function(i, v) { 
$('.date').append($("<span>").html(v));
}); 

....到目前为止一切都很好......这个http://jsfiddle.net/MealaBmay/K3D6d/1088/正在工作，但是 我意识到每个“.date”都以相同的内容结束。我似乎无法将此脚本转换为每个... 我看了Splitting text and wrapping each of the words in elements in jQuery 并尝试使用相同的方法....但是 sigh 一直画一个空白...那里有任何帮助者吗？谢谢

Answer 1

使用带有回调函数的.text() 的setter 版本

$('.date').each(function(i, text) {
  var $this = $(this),
    data = $this.text().slice(17);
  var arr = data.split(',');
  $this.empty();
  $.each(arr, function(i, v) {
    $this.append($("<span>").html(v));
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="date">Di 22.10.2014 um 14:00, 18:00</div>
<div class="date">Di 22.10.2014 um 14:00, 18:00, 20:00</div>

---

可能还有另一种方法来做同样的事情

$('.date').html(function(i, html) {
  return $.map(html.trim().substring(17).split(','), function(item) {
    return '<span>' + item + '</span>'
  }).join('')
})

.date span {
  border: 1px solid lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="date">Di 22.10.2014 um 14:00, 18:00</div>
<div class="date">Di 22.10.2014 um 14:00, 18:00, 20:00</div>