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

时间:2015-07-03 07:48:37

标签: javascript jquery

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

fields = row.find('input');

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

fields.eq(index).val()

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

fields[index].val()

编辑:

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

7 个答案:

答案 0 :(得分:3)

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

$.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.

答案 1 :(得分:2)

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

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

console.log(arrFields);
祝你好运!

答案 2 :(得分:1)

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

答案 3 :(得分:1)

您可以同时使用jQuery toArray() functionjQuery.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>

答案 4 :(得分:1)

你可以这样做:

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

但这很荒谬。

答案 5 :(得分:0)

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

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

答案 6 :(得分:-2)

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