.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>');           
});

Answer 2

你只是把它复杂化了，只是让它们都有一个共享类（例如date）并只运行一次.each 代码。他们都做同样的行为是

• 用连字符分隔li 中的日期
• 在<button> 上使用日期部分作为类
• 用链接包装日期。

查看下面的工作代码并查看源代码以查看转换。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="courseDates">
  <li class="date col-sm-2">
    14-Dec-2016
  </li>
  <li class="date col-sm-2">
    15-Dec-2016
  </li>
  <li class="date col-sm-2">
    16-Dec-2016
  </li>
  <li class="date col-sm-2">
    24-Dec-2016
  </li>
  <li class="date col-sm-2">
    29-Dec-2016
  </li>
</ul>