Question

我想知道是否有办法将包含元素集合的jQuery选择器拆分为一个选择器数组，每个元素一个。例如，我有：

fields = row.find('input');

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

fields.eq(index).val()

访问单个值，但有一种简单的方法来构造或将字段转换为选择器数组，所以我可以使用

fields[index].val()

编辑：

是的，我意识到你可以使用.toArray（），但正如下面所指出的那样，它返回一个DOM元素数组。然后你必须循环将这些转换为选择器 - 太多额外的工作。

Answer 1

一个小插件怎么样为你做这个？

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

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

Here's a fiddle with usage.

Answer 2

如果您使用纯javascript，则可以通过数组访问输入，但如果您需要使用jQuery，则可以进行循环：

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

console.log(arrFields);

祝你好运！

Answer 3

您可以使用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" />

Answer 4

您可以同时使用jQuery toArray() function或jQuery.makeArray() function 它们都将返回一个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>

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");

但这很荒谬。

Answer 6

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

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

Answer 7

每个html元素，如果它没有id，则不保证拥有唯一的选择器。

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

编辑：

7 个答案: