查找页面所有类是 Edit 的 Input 且 type 是 text 的元素,遍历它们,并返回它们的 Value 数组?
参考回答
要查找页面中所有类名是 Edit 且 type 为 text 的 <input> 元素,并返回它们的 value 数组,可以使用如下的 jQuery 代码:
var values = ('input.Edit[type="text"]').map(function() {
return(this).val();
}).get();
这段代码通过 map 方法遍历所有符合条件的 <input> 元素,获取它们的 value 值,并使用 get() 方法将结果转换为普通的 JavaScript 数组。
详细讲解与拓展
- 选择器说明:
$('input.Edit[type="text"]')选择所有<input>元素,这些元素同时满足以下两个条件:class="Edit":元素的类名是Edit。type="text":元素的type属性值是text。
这个选择器会选中页面上所有符合条件的
input元素。 -
.map()方法:map()是 jQuery 的一个迭代方法,类似于 JavaScript 的Array.map()。它会遍历集合中的每个元素,并对每个元素执行提供的回调函数。- 在这里,
map()回调函数中的$(this).val()会获取每个符合条件的<input>元素的value值。
.get()方法:map()方法返回一个 jQuery 对象,它本质上是一个包含 DOM 元素的集合。如果你想将其转换成普通的 JavaScript 数组,可以使用.get()方法。调用.get()会将 jQuery 对象中的元素提取出来,并返回一个原生的 JavaScript 数组。- 例如,假设页面上有两个符合条件的
<input>元素,map()将返回一个 jQuery 对象,这个对象包含两个value值。使用.get()后,将得到一个包含这两个value值的普通数组。
- 示例 HTML 代码:
假设你的页面有以下 HTML 结构:<input class="Edit" type="text" value="Value 1"> <input class="Edit" type="text" value="Value 2"> <input class="Edit" type="text" value="Value 3">使用上述 jQuery 代码后,返回的
values数组将是:["Value 1", "Value 2", "Value 3"] - 其他考虑:
- 如果没有符合条件的
<input>元素,values将是一个空数组[]。 - 通过
.val()获取的是元素的当前值,如果用户没有输入任何内容,则返回空字符串""。
- 如果没有符合条件的
总结
- 使用 jQuery 的
$('input.Edit[type="text"]')选择器可以找到所有类名为Edit且type为text的input元素。 - 通过
map()方法遍历这些元素并获取它们的value值,再通过.get()方法将结果转换为 JavaScript 数组。