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

I need to remove the .each so the code operates for each item, the .each is causing undefined errors in other items on the page. It needs to be individual, so it outputs specific tags per group of dates, the .each function make the last item on the page work, but then has undefined errors on the first item .

Here is a working version, so you can check it.

Is there a better way to write the JS?

Any help regarding this matter would be greatly appreciated, thanks.

Answer 1

Try something like this.

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

You're simply overcomplicating this, just make them all have one shared class (eg date ) and run the .each code just once. They all do the same behaviour which is

• Split the date in the li by a hyphen
• use the date part as a class on the <button>
• Wrap the date with a link.

See working code below and view source to see the transformation.

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