javascript - .each js 导致页面上其他类出现问题

Question

HTML

<ul class="courseDates">
    <li class="dateOne col-sm-2">
        {tag_course date 1}
    </li>
    <li class="dateTwo col-sm-2">
        {tag_course date 2}
    </li>
    <li class="dateThree col-sm-2">
        {tag_course date 3}
    </li>
    <li class="dateFour col-sm-2">
        {tag_course date 4}
    </li>
    <li class="dateFive col-sm-2">
        {tag_course date 5}
    </li>
</ul>

Javascript

$('.dateOne').each(function() {    
    var data =jQuery(this).text();
    var arr = data.split('-');
    jQuery(this).html('<a class="button '+arr[1] + '" href="/training-rego?trainingDate={tag_course date 1}&trainingName={tag_name_nolink}&courseId={tag_itemid}"> <span class="day">'+arr[0] + '</span> <span class="month">'+arr[1] + '</span> <span  class="year">'+arr[2] + '</span> </a>');            
}); 

$('.dateTwo').each(function() {    
    var data =jQuery(this).text();
    var arr = data.split('-');
    jQuery(this).html('<a class="button '+arr[1] + '" href="/training-rego?trainingDate={tag_course date 2}&trainingName={tag_name_nolink}&courseId={tag_itemid}"> <span class="day">'+arr[0] + '</span> <span class="month">'+arr[1] + '</span> <span  class="year">'+arr[2] + '</span> </a>');            
}); 

$('.dateThree').each(function() {    
    var data =jQuery(this).text();
    var arr = data.split('-');
    jQuery(this).html('<a class="button '+arr[1] + '" href="/training-rego?trainingDate={tag_course date 3}&trainingName={tag_name_nolink}&courseId={tag_itemid}"> <span class="day">'+arr[0] + '</span> <span class="month">'+arr[1] + '</span> <span  class="year">'+arr[2] + '</span> </a>');            
});

$('.dateFour').each(function() {    
    var data =jQuery(this).text();
    var arr = data.split('-');
    jQuery(this).html('<a class="button '+arr[1] + '" href="/training-rego?trainingDate={tag_course date 4}&trainingName={tag_name_nolink}&courseId={tag_itemid}"> <span class="day">'+arr[0] + '</span> <span class="month">'+arr[1] + '</span> <span  class="year">'+arr[2] + '</span> </a>');            
}); 

$('.dateFive').each(function() {    
    var data =jQuery(this).text();
    var arr = data.split('-');
    jQuery(this).html('<a class="button '+arr[1] + '" href="/training-rego?trainingDate={tag_course date 5}&trainingName={tag_name_nolink}&courseId={tag_itemid}"> <span class="day">'+arr[0] + '</span> <span class="month">'+arr[1] + '</span> <span  class="year">'+arr[2] + '</span> </a>');            
}); 

我需要删除 .each 以便代码对每个项目进行操作，.each 会导致页面上其他项目出现未定义的错误。它需要是单独的，因此它会输出每组日期的特定标签，.each 函数使页面上的最后一个项目正常工作，但第一个项目上出现未定义的错误。

Here是一个工作版本，所以你可以检查它。

有更好的JS编写方法吗？

任何有关此事的帮助将不胜感激，谢谢。

Answer 1

尝试这样的事情。

HTML

<ul class="courseDates">
    <li class="date col-sm-2">
        {tag_course date 1}
    </li>
    <li class="date col-sm-2">
        {tag_course date 2}
    </li>
    <li class="date col-sm-2">
        {tag_course date 3}
    </li>
    <li class="date col-sm-2">
        {tag_course date 4}
    </li>
    <li class="date col-sm-2">
        {tag_course date 5}
    </li>
</ul>

Javascript

$('.date').each(function(index) {    
    var data =jQuery(this).text();
    var arr = data.split('-');
    jQuery(this).html('<a class="button '+arr[1] + '" href="/training-rego?trainingDate={tag_course date ' + index + '}&trainingName={tag_name_nolink}&courseId={tag_itemid}"> '+arr[0] + ' '+arr[1] + ' '+arr[2] + ' </a>');           
});