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>

.each js导致第

2 个答案: