JQuery循環切片（），split（）和包裹數組...對於類的每個元素

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 並試圖使用相同的方法....但嘆息不斷繪製一個空白......任何幫手在那裏？ THX

Answer 1

使用.text()二傳手版本，這需要一個回調函數

$('.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>