.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 код только один раз. Они все делают то же самое поведение, которое

• Split дата в li дефисом
• использовать часть даты в качестве класса на <button>
• Wrap дату со ссылкой.

Просмотреть приведенный ниже код и просмотреть исходный код, чтобы увидеть преобразование.

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