JQuery Целевые классы отдельно

У меня есть код HTML, подобный этому.

<!-- Every time string is different -->
<span class="time_string">123456789</span> 
<span class="time_string">981251100</span>
<span class="time_string">051036626</span>
<span class="time_string">016165656</span>

Я хочу, чтобы Jquery изменила временную строку на сегодняшний день

<!-- Look every date is different -->
<span class="time_string">25 March 2017</span> 
<span class="time_string">28 April 2017</span>
<span class="time_string">14 January 2017</span>
<span class="time_string">21 December 2015</span>

Для этого я использовал этот код Jquery:

<script type="text/javascript">

    function timestr_to_date(time_string){
        // this function will convert the time string to date
    }

    $(document).ready(function(){

        // getting the time string
        var time_string = $('.time_string').html();

        // converting the time string to date by using function
        var date = timestr_to_date(time_string);

        // replacing the time_string to date
        $('.time_string').html(date);

    });

</script>

Но я получаю каждую дату такой же

<!-- PROBLEM: Every date are same -->
<span class="time_string">25 March 2017</span> 
<span class="time_string">25 March 2017</span>
<span class="time_string">25 March 2017</span>
<span class="time_string">25 March 2017</span>

Ответ 1

Чтобы исправить это, вам необходимо выполнить цикл через каждый элемент .time_string и изменить их значения индивидуально.

Для этого вы можете использовать цикл each() или, более подробно, путем предоставления функции text(), которая принимает текущее значение и возвращает значение, которое вы хотите обновить. Попробуйте следующее:

$('.time_string').text(function(i, t) {
  return timestr_to_date(t);
});

function timestr_to_date(time_string) {
  // your date formatting logic here, this is just for this example:
  return new Date(time_string * 1000);
}

span { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="time_string">123456789</span>
<span class="time_string">981251100</span>
<span class="time_string">051036626</span>
<span class="time_string">016165656</span>

Ответ 2

Вы должны использовать jQuery.each https://api.jquery.com/each/

$('.time_string').each(function() {
  var time_string = $(this).html();

  var date = timestr_to_date(time_string);

  $(this).html(date);
});

Ответ 3

Вы должны пропустить все классы:

$(document).ready(function(){


   // getting the time string
    $('.time_string').each(function(){
         var time_string = $(this).text();

      // converting the time string to date by using function
      var date = timestr_to_date(time_string);

      // replacing the time_string to date
       $(this).text(date);
       });

    });

Ответ 4

Перейдите через все span с классом time_string и измените их значение, пожалуйста, найдите ниже фрагмент для получения дополнительной информации

function timestr_to_date(time_string) {
  // this function will convert the time string to date
}

$(document).ready(function() {
  $(".time_string").each(function() {
    // getting the time string
    var time_string = $(this).html();
    // converting the time string to date by using function
    var date = timestr_to_date(time_string);
    // replacing the time_string to date
    $(this).html(date);
  });
});

<span class="time_string">123456789</span> 
<span class="time_string">981251100</span>
<span class="time_string">051036626</span>
<span class="time_string">016165656</span>

Ответ 5

Вы должны сделать цикл во всех тегах span, попробуйте этот код:

$(document).ready(function(){

    $( "span" ).each(function() {

        // getting the time string
        var time_string = $(this).html();

        // converting the time string to date by using function
        var date = timestr_to_date(time_string);

        // replacing the time_string to date
        $(this).html(date);

   });

});

Ответ 6

Вам нужно будет перебрать все теги span и преобразовать метку времени в дату Like Below

$('span.time_string').each(function(){
     var time = $(this).text();      
     var date = timestr_to_date(time);
     $(this).text(date);
});