。每个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代码只有一次。他们都做同样的行为，这是

• 斯普利特用连字符
• 使用日期部分作为与链接设定<button>
• 包裹的日期一类的li的日期。

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

$('.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>