Question

如何拆分多个链接并用span标记包装它们然后循环它们以将它们输出回a标记内。我似乎几乎在那里，因为我将所有日期拆分为下面的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 DEMO

Answer 1

在你的循环中，你每次都要参考每一个而不是一个一个。您可以删除for并在each内执行：

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

fiddle

每次$(".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]);
}

你也可以用

select x.*,ROW_NUMBER() over (order by rownum,category)  as uniquerownum
from
      (select *,row_number() over (partition by category order by category) rownum
       from Store) x
order by rownum,category

fiddle2

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 个答案: