jQuery Target classes separately

Question

I have a HTML code like this.

<!-- 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>

I want Jquery change the time string to date

<!-- 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>

To do this I have used this Jquery Code:

<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>

But it I got every date same

<!-- 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>

Answer 1

You should use 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);
});

Answer 2

To fix this you need to loop through each .time_string element and amend their values individually.

To do that you could use an each() loop, or more succinctly, by providing a function to text() which takes the current value and returns the value you want to update to. Try this:

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

Answer 3

You should loop through all the classes:

$(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);
       });

    });

Answer 4

Iterate through all span with class time_string and change their value please find below snippet for more info

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>

Answer 5

You should make loop in all span tags, try this code:

$(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);

   });

});