jQuery目標類別單獨

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()一個函數，它接受的電流值，並返回要更新的值。試試這個：

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

你應該遍歷所有類：

$(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 3

迭代通過所有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>

Answer 4

您應該使用jQuery.eachhttps://api.jquery.com/each/

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

    var date = timestr_to_date(time_string); 

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

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