使用JQuery中的類選擇相同的元素
[英]Selecting same element using class in JQuery
問題描述
我的應用程序中有很多日期字段。 ID無濟於事，我想使用class格式化日期字段。 嘗試格式化日期時，Holder2日期也更改為Holder1的日期PFB
$(document).ready(function(){ $('.date').val($.format.date($('.date').val(), "MM/dd/yyyy hh:mm a")); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> <html> <head> <title>Test</title> </head> <body> <div> Holder 1:<input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"><br> Holder 2:<input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> </div> </body> </html>
當前輸出： Holder 1：02/02/2017 12:30 AM Holder 2：02/06/2017 12:30 AM
預期的輸出： Holder 1：02/06/2017 12:30 AM Holder 2：03/12/2017 11:06 AM
PS：類型以文字形式提及，因為如果以日期形式提及，則chrome顯示其自己的日期選擇器。 我的自定義日期選擇器和鑲邊都同時加載。 請幫幫我。 謝謝。
4 個解決方案
解決方案1
1 已采納 2017-03-12 06:42:08
在文檔中有使用CSS類的格式設置。 https://github.com/phstc/jquery-dateFormat
$(document).ready(function() { var longDateFormat = "MM/dd/yyyy hh:mm a"; jQuery(".date").each(function(idx, elem) { jQuery(elem).val(jQuery.format.date(jQuery(elem).val(), longDateFormat)); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> <div> Holder 1: <input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"> <br> Holder 2: <input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> </div>
解決方案2
1 2017-03-12 06:43:52
$('.date')選擇器會將更改應用於與該選擇器匹配的所有jQuery元素，但將從與查詢匹配的第一個元素獲取val 。 要從將要格式化的元素中獲取val ，可以使用jQuery的.each()以及$(this) ，以確保將當前匹配的元素作為目標。
$(document).ready(function(){ $('.date').each(function() { $(this).val($.format.date($(this).val(), "MM/dd/yyyy hh:mm a")); }); });
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> <html> <head> <title>Test</title> </head> <body> <div> Holder 1:<input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"><br> Holder 2:<input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> </div> </body> </html>
解決方案3
1 2017-03-12 06:44:34
您需要一次處理一個元素，這可以通過.each()循環來完成，或者更方便的是， 為.val()方法提供回調函數 。 您提供的函數將為每個元素調用一次，並將接收該字段的當前值作為參數。 您返回的任何值都將設置為該值。
$(document).ready(function(){ $('.date').val(function(i, oldVal) { return $.format.date(oldVal, "MM/dd/yyyy hh:mm a"); }); });
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script> <html> <head> <title>Test</title> </head> <body> <div> Holder 1:<input class="date" type="text" value="Mon Feb 06 00:30:00 IST 2017"><br> Holder 2:<input class="date" type="text" value="Sun Mar 12 11:06:00 IST 2017"> </div> </body> </html>
解決方案4
0 2017-03-12 06:43:33
您不能這樣做，因為最后您會看到所有輸入都具有相同的結果，實際上是第一個結果添加到所有輸入中。
您應該使用each（）
$('.date').each(function(index){
$(this).someMethod()
});
jQuery：當選擇器相同時，使用：eq選擇第二個元素
[英]jQuery: Selecting the second element when selectors are same using :eq
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.