使用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.