使用JQuery中的类选择相同的元素
[英]Selecting same element using class in JQuery
问题描述
I have lot of date fields in my application. 
我的应用程序中有很多日期字段。 IDs can't help, I want to format date fields using class. ID无济于事，我想使用class格式化日期字段。 While trying to format the date, Holder2 date is also changed to Holder1's date, PFB 尝试格式化日期时，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>
Current Output: Holder 1: 02/06/2017 12:30 AM Holder 2: 02/06/2017 12:30 AM 当前输出： Holder 1：02/02/2017 12:30 AM Holder 2：02/06/2017 12:30 AM
Expected Output: Holder 1: 02/06/2017 12:30 AM Holder 2: 03/12/2017 11:06 AM 预期的输出： Holder 1：02/06/2017 12:30 AM Holder 2：03/12/2017 11:06 AM
PS: type is mentioned as text because if mentioned as date, chrome shows its own datepicker. PS：类型以文字形式提及，因为如果以日期形式提及，则chrome显示其自己的日期选择器。 Both my custom datepicker and chrome's are loaded at the same time. 我的自定义日期选择器和镶边都同时加载。 Help me out please. 请帮帮我。 Thanks. 谢谢。
4 个解决方案
解决方案1
1 已采纳 2017-03-12 06:42:08
there is a formatting using css classes right in the documentation. 在文档中有使用CSS类的格式设置。 https://github.com/phstc/jquery-dateFormat 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
The $('.date') selector will apply the change to all jQuery elements matching that selector, but will get the val from the first element matching the query. $('.date')选择器会将更改应用于与该选择器匹配的所有jQuery元素，但将从与查询匹配的第一个元素获取val 。 To get the val from the element you'll be formatting, you can use jQuery's .each() , along with $(this) , to make sure you're targeting the current matched element. 要从将要格式化的元素中获取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
You need to do the elements one at a time, which you can do with an .each() loop, or, more conveniently, by providing a callback function to the .val() method . 您需要一次处理一个元素，这可以通过.each()循环来完成，或者更方便的是， 为.val()方法提供回调函数 。 The function you provide will be called once for each element, and will receive the current value of the field as an argument; 您提供的函数将为每个元素调用一次，并将接收该字段的当前值作为参数。 whatever value you return will be set as the value. 您返回的任何值都将设置为该值。
$(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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.