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

Question

我知道這已發布在這里： 如何使用jquery或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：

演示

謝謝邦

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() ，例如使用$.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>