Question

我有这样的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>

Answer 1

要解决此问题，您需要遍历每个.time_string元素并单独修改它们的值。

要做到这一点，你可以使用each()循环，或者更简洁，通过向text()提供一个函数来获取当前值并返回你想要更新的值。试试这个：

＆＃13;

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

＆＃13;

span { display: block; }

＆＃13;

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

＆＃13;

Answer 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);
});

Answer 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);
       });

    });

Answer 4

使用课程span迭代所有time_string并更改其值，请在下面的代码中找到更多信息

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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);

   });

});

Answer 6

您必须迭代所有span标记并将时间戳转换为Like Below

之类的日期

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

jQuery目标类分开

6 个答案: