查找页面所有类是 Edit 的 Input 且 type 是 text 的元素,遍历它们,并返回它们的 Value 数组?

参考回答

要查找页面中所有类名是 Edittypetext<input> 元素,并返回它们的 value 数组,可以使用如下的 jQuery 代码:

var values = ('input.Edit[type="text"]').map(function() {
    return(this).val();
}).get();

这段代码通过 map 方法遍历所有符合条件的 <input> 元素,获取它们的 value 值,并使用 get() 方法将结果转换为普通的 JavaScript 数组。

详细讲解与拓展

  1. 选择器说明:
    • $('input.Edit[type="text"]') 选择所有 <input> 元素,这些元素同时满足以下两个条件:
      • class="Edit":元素的类名是 Edit
      • type="text":元素的 type 属性值是 text

    这个选择器会选中页面上所有符合条件的 input 元素。

  2. .map() 方法:

    • map() 是 jQuery 的一个迭代方法,类似于 JavaScript 的 Array.map()。它会遍历集合中的每个元素,并对每个元素执行提供的回调函数。
    • 在这里,map() 回调函数中的 $(this).val() 会获取每个符合条件的 <input> 元素的 value 值。
  3. .get() 方法:
    • map() 方法返回一个 jQuery 对象,它本质上是一个包含 DOM 元素的集合。如果你想将其转换成普通的 JavaScript 数组,可以使用 .get() 方法。调用 .get() 会将 jQuery 对象中的元素提取出来,并返回一个原生的 JavaScript 数组。
    • 例如,假设页面上有两个符合条件的 <input> 元素,map() 将返回一个 jQuery 对象,这个对象包含两个 value 值。使用 .get() 后,将得到一个包含这两个 value 值的普通数组。
  4. 示例 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"]
    
  5. 其他考虑:
    • 如果没有符合条件的 <input> 元素,values 将是一个空数组 []
    • 通过 .val() 获取的是元素的当前值,如果用户没有输入任何内容,则返回空字符串 ""

总结

  • 使用 jQuery 的 $('input.Edit[type="text"]') 选择器可以找到所有类名为 Edittypetextinput 元素。
  • 通过 map() 方法遍历这些元素并获取它们的 value 值,再通过 .get() 方法将结果转换为 JavaScript 数组。

发表评论

后才能评论