如何拆分字符串並將其包裝在span標簽中，然后使用jQuery輸出新代碼？

Question

如何拆分多個鏈接，並用span標簽包裹它們，然后循環遍歷它們以將其輸出回a標簽內。 我似乎dateArr到了，因為我將所有日期都分成了下面的dateArr ，只需要一種循環方式，以便我可以輸出每個日期？

日期是從動態PHP代碼中提取的，因此這就是為什么我不能將它們包裝在初始HTML中的原因，因此需要使用JS來完成。

目前的HTML

<div class="award-date-section">
  <ul>
    <li><a href="#">2011 - 2015</a></li>
    <li><a href="#">2006 - 2010</a></li>
    <li><a href="#">2001 - 2005</a></li>
  </ul>
</div>

這就是我希望它輸出的方式：

<div class="award-date-section">
  <ul>
    <li><a href="#"><span class="left-date">2011</span> <span class="middle"> - </span> <span class="right-date">2015</span></a></li>
    <li><a href="#"><span class="left-date">2006</span> <span class="middle"> - </span> <span class="right-date">2010</span></a></li>
    <li><a href="#"><span class="left-date">2001</span> <span class="middle"> - </span> <span class="right-date">2005</span></a></li>
  </ul>
</div>

JS

var dates;
var splitDates = [];
var dateArr = [];


$(".award-date-section ul li a").each(function(i, el){

   dates = $(this).text();

   splitDates = dates.split('-');

   dateArr.push("<span class='left-date'>" + splitDates[0] + "</span><span class='middle'> - </span><span class='right-date'>" + splitDates[1] + "</span>");


});

for(var i = 0; i < dateArr.length; i++){
    $(".award-date-section ul li a").html(dateArr);
}

JSBIN演示

Answer 1

在您的循環中，您每次都引用每個li，而不是一個一個地引用。 您可以在each do中刪除for和：

$(this).html("<span class='left-date'>" + splitDates[0] + "</span><span class='middle'> - </span><span class='right-date'>" + splitDates[1] + "</span>")

小提琴

在$(".award-date-section ul li a")使用$(".award-date-section ul li a") ，每次每次li上的最后一個數組元素都將獲得

你也可以使用

for(var i = 0; i < dateArr.length; i++){
    $(".award-date-section ul li a:eq("+i+")").html(dateArr[i]);
}

小提琴2

Answer 2

我有類似的需求，php正在生成：

    20 hours 35 minutes 23 seconds

所以我做到了

    var dates;
    var splitDates = [];
    var dateArr = [];


$(".thisone").each(function(i, el){
   dates = $(this).text();
  console.log($(this).text())

splitDates = dates.split(' ');

$(this).html("<span class='numeric'>" + splitDates[2] + "</span> <span 
class='alpha'>" + splitDates[3] + "</span> <span class='numeric'>" + 
splitDates[4] + "</span> <span class='alpha'>" + splitDates[5] + "</span> 
<span class='numeric'>" + splitDates[6] + "</span> <span class='alpha'>" + 
splitDates[7] + "</span>")
});


<body>
<div class="thisone">
  20 hours 35 minutes 23 seconds
</div>
</body>

但是為什么拆分日期必須從2開始？

如何拆分字符串並將其包裝在span標簽中，然后使用jQuery輸出新代碼？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-08-24 09:40:05

解決方案2
0 2017-05-24 16:21:50

如何拆分字符串並將其包裝在span標簽中，然后使用jQuery輸出新代碼？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-08-24 09:40:05

解決方案2 0 2017-05-24 16:21:50

解決方案1
1 已采納 2015-08-24 09:40:05

解決方案2
0 2017-05-24 16:21:50