如何使用jQuery或JavaScript分割多個字符串？

Question

我知道這張貼在這裏：how to split the string using jquery or javascript

但在我的情況下有多個字符串。它只用一行字符串工作，但如果它在多行中，它會一年又一年地重複。由於某種原因，它只顯示第一個'li'值。是否有可能以顯示它是這樣的：

<ul> 
<li> 
    <div class="date"> 
     <p class='day'>23</p> 
     <p class='month'>05</p> 
     <p class='year'>2013</p> 
    </div> 
</li> 
<li> 
    <div class="date"> 
     <p class='day'>25</p> 
     <p class='month'>07</p> 
     <p class='year'>2014</p> 
    </div> 
</li> 
<li> 
    <div class="date"> 
     <p class='day'>01</p> 
     <p class='month'>05</p> 
     <p class='year'>2014</p> 
    </div> 
</li> 
</ul> 

這裏是我的代碼：

HTML

<ul> <li><div class="date">23-05-2013</div></li> <li><div class="date">25-07-2014</div></li> <li><div class="date">01-05-2014</div></li> </ul>

CSS：

.day{color:#ccc;} 
.month{color:#ff0000;} 
.year{color:green;} 

腳本：

var data =$('.date').text(); 
var arr = data.split('-'); 
$(".date").html("<p class='day'>"+arr[0]+"</p>"+"<p class='month'>"+arr[1]+"</p>"+"<p cass='year'>"+arr[2]+"</p>"); 

的jsfiddle：

demo

感謝苯教

Answer 1

您都可以從第一個元素的文本，並改變所有元素包含的代碼。您需要遍歷元素並轉換每個元素中的內容。

您可以使用一個回調函數在html方法，這樣做，就會得到每個元素原來的HTML代碼，並返回新的HTML代碼，這個元素：

$(".date").html(function(i, h) { 
    var arr = h.split('-'); 
    return "<p class='day'>"+arr[0]+"</p><p class='month'>"+arr[1]+"</p><p class='year'>"+arr[2]+"</p>"; 
}); 

演示：http://jsfiddle.net/Guffa/815c95jn/1/ （請注意功能上的差異，因爲這將在每個元素中取代HTML代碼，而不是文本。只要元素中沒有實際的HTML標記，就像在你的例子中一樣，在結果）。

---

到拆分文本另一種方法是使用replace：

$(".date").html(function(i, h) { 
    return "<p class='day'>" + h.replace("-", "</p><p class='month'>").replace("-", "</p><p class='year'>") + "</p>"; 
}); 

Answer 2

您只選擇了一個.date，但你必須遍歷所有的人，例如使用$.each()：

$(".date").each(function() { 
    var data = $(this).text(); 
    var arr = data.split('-'); 
    $(this).html("<p class='day'>" + arr[0] + "</p>" + 
    "<p class='month'>" + arr[1] + "</p>" + "<p class='year'>" + arr[2] + "</p>"); 
}); 

調整Fiddle，以供參考：http://api.jquery.com/each/

Answer 3

自題詢問如何完成這個使用jQuery或Javascript（假設香草JS）讓我給的是如何一個簡單的例子而不需要可能進行的jQuery：

var dates = document.querySelectorAll('.date'); 
 
var dateClasses = ['day', 'month', 'year']; 
 

 
Array.prototype.forEach.call(dates, function(date){ 
 
    var dateString = date.innerHTML; 
 
    var dateStringArray = dateString.split('-'); 
 
    var content = ""; 
 
    
 
    for(var i = 0; i < dateStringArray.length; i++){ 
 
     
 
     var newDate = document.createElement('p'); 
 
     newDate.classList.add(dateClasses[i]); 
 
     newDate.innerHTML = dateStringArray[i]; 
 
     content += newDate.outerHTML; 
 
    
 
    } 
 
    
 
    date.innerHTML = content; 
 
});

.day{color:#ccc;} 
 
.month{color:#ff0000;} 
 
.year{color:green;}

<ul> 
 
    <li><div class="date">23-05-2013</div></li> 
 
    <li><div class="date">25-07-2014</div></li> 
 
    <li><div class="date">01-05-2014</div></li> 
 
</ul>