将jQuery集合拆分为单个jQuery对象的数组

Question

我想知道是否有一种方法可以将包含元素集合的jQuery选择器拆分成一个选择器数组，每个元素对应一个选择器。例如，我有以下内容：

fields = row.find('input');

该函数返回一个包含多个输入元素的选择器。我知道可以使用

fields.eq(index).val()

如何访问单个值是已知的，但有没有一种简单的方法来构建或将字段转换为选择器数组，以便我只需使用

fields[index].val()

编辑：

是的，我知道您可以使用 .toArray()，但是正如下面所指出的那样，返回的是一个DOM元素数组。然后您需要循环遍历以将其转换为选择器-这需要太多额外的工作。

- Jhacker

---

为什么 fields.eq(index).val() 不能满足你的需求？为了实现已经可以做到的事情而额外努力似乎有些奇怪。 - Rory McCrossan

$(fields[index]).val() 也可以。 - Royi Namir

@RoyiNamir 是的，但这是使用 jQuery 对象获取 DOM 元素并将其转换回 jQuery 对象，这完全是多余的。 - Rory McCrossan

@RoryMcCrossan 我认为他想要使用[]访问。这是可能的，但是需要付出代价。总的来说 - 我认为你的评论是正确的，没有必要添加额外的功能。 - Royi Namir

我猜.eq或重新选择可能是最简单的语法。只是想知道jQuery是否内置了像拆分命令一样的东西，但是针对选择器集合。 - Jhacker

Answer 1

要不要来一个小插件来帮你实现这个功能呢？

$.fn.toJqArray = function(){
   var arr = [];
    $(this).each(function(){
       arr.push($(this)); 
    });
    return arr;
};

var inputs = $('input').toJqArray();
var value = inputs[0].val();

这里有一个使用示例。

- Dave Salomon

---

太好了！但不幸的是，在jQuery中并不标准。他们应该加上它。 - Jhacker

Answer 2

如果你使用纯JavaScript，你可以通过数组来访问输入框，但是如果你需要使用jQuery，则可以通过循环来实现：

var arrFields = [];
fields.each(function() {
     arrFields.push($(this).val());
});

console.log(arrFields);

祝你好运！

- Marcos Pérez Gude

Answer 3

您可以使用jQuery toArray()函数或者jQuery.makeArray()函数。两个函数都会返回一个DOM元素的数组。

它们之间的区别在于toArray函数仅将jQuery结果对象转换为数组:

$("p").toArray(); // correct

$.makeArray 是一个更加多功能和复杂的函数。它可以将任何类数组对象转换为一个合适的JS数组。

例如，

var elems = document.getElementsByTagName("p");

实际上返回的是类似于数组的nodeList，而不是数组。

你不能这样做：

var elems = document.getElementsByTagName("div"); 
elems.reverse(); // error. reverse() is not part of nodeList

然而，你可以这样做。

var elems = document.getElementsByTagName("div"); 
var arr = $.makeArray(elems);
arr.reverse(); // ok. arr is a JS array which has reverse() function

然而，在转换jQuery选择结果的情况下，它们之间没有区别。 请看下面的代码片段，它进行了一个jQuery选择，以两种不同的方式将这个jQuery对象转换为两个JS数组，并使用非jQuery DOM innerHTML属性。

var pJquery = $("p");

var pArray1 = pJquery.toArray();
var pArray2 = $.makeArray(pJquery);

document.getElementById('output').innerHTML = pArray1[1].innerHTML;
document.getElementById('output').innerHTML += pArray2[2].innerHTML;

p
{
  color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>

<div id="output"></div>

- Yeldar Kurmangaliyev

Answer 4

你可以使用jQuery的.toArray()方法：

var arr = fields.toArray();
console.log(arr[0].value)

在这里不能使用 .val()，但是 .value 可以正常工作。

一个小的示例/概念证明：

var fields = $('input').toArray();
$.each(fields, function(i, o) {
  console.log(o.value + ' == ' + fields[i].value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="a" value="a" />
<input name="b" value="b" />
<input name="c" value="c" />
<input name="d" value="d" />

- Mackan

Answer 5

你可以这样做：

var $input = $("input");
var $$input = $input.map(function() {
    return $(this);
}).get();

console.log($input instanceof Object); // true
console.log($input instanceof jQuery); // true
console.log($$input instanceof Array); // true

$input.eq(3).val("test");
$$input[3].val("test");

但这太荒谬了。

- Salman A

---

我尝试过这个，但它似乎不太起作用。数据类型似乎是正确的，但是 fields[0].val() 却无法工作。 - Jhacker

嗯，那似乎不起作用，我在代码中可能有其他问题。但是，.get() 不应该返回 DOM 对象吗？ - Jhacker

.get() 简单返回一个包含所有 元素 的 JavaScript 数组。在上面的例子中，每个 元素 都是一个包含单个 DOM 元素的 jQuery 对象。 - Salman A

Answer 6

是的，你可以使用.toArray()

var fieldsArray = [];
fieldsArray = fields.toArray();

- itacode

Answer 7

每个HTML元素，如果它没有一个ID，就不能保证拥有一个唯一的选择器。

- Remy Grandin