I am wondering if there is a way to split a jQuery selector which contains a collection of elements into an array of selectors, one for each element. For example, I have:

fields = row.find('input');

which returns a selector containing multiple input elements. I know I can use

fields.eq(index).val()

to access individual values, but is there an easy way to construct or convert fields to an array of selectors so I can just use

fields[index].val()

Edit:

Yes I realize you can use .toArray(), but as has been pointed out below, that returns an array of DOM elements. Then you'd have to loop through to convert these to selectors - too much extra work.

I am wondering if there is a way to split a jQuery selector which contains a collection of elements into an array of selectors, one for each element. For example, I have:

fields = row.find('input');

which returns a selector containing multiple input elements. I know I can use

fields.eq(index).val()

to access individual values, but is there an easy way to construct or convert fields to an array of selectors so I can just use

fields[index].val()

Edit:

Yes I realize you can use .toArray(), but as has been pointed out below, that returns an array of DOM elements. Then you'd have to loop through to convert these to selectors - too much extra work.

• javascript
• jquery

• 3 Why does fields.eq(index).val() not meet your needs? It seems odd to do extra work to achieve something thats already possible. – Rory McCrossan Commented Jul 3, 2015 at 7:54
• 1 $(fields[index]).val() will also do – Royi Namir Commented Jul 3, 2015 at 7:56
• @RoyiNamir true, but that's using a jQuery object to get a DOMElement to turn it back in to a jQuery object, which is pletely redundant. – Rory McCrossan Commented Jul 3, 2015 at 7:57
• 1 @RoryMcCrossan I think he wants the [] access . it's possible. but it has a cost. As in general - I think your ment is right. no need to add extra features. – Royi Namir Commented Jul 3, 2015 at 7:58
• I guess either .eq or re-selecting are the simplest syntaxes possible. Was just wondering if jQuery had anything built in like a split mand, but for selector collections. – Jhacker Commented Jul 3, 2015 at 8:36

7 Answers 7

How about a small plugin to do this for you?

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

You can use both jQuery toArray() function or jQuery.makeArray() function.
Both of them will return an array of DOM elements.

The difference is that toArray function converts only jQuery result object to an array:

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

$.makeArray is more multipurpose and plicated. It converts any array-like objects to a proper JS array.

For example,

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

actually returns array-like nodeList, but not an array.

You cannot do:

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

However, you can do

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

However, in case of converting jQuery selection result - there is no difference between them. Take a look at the following code snippet which makes a jQuery selection, converts this jQuery object to two JS arrays in two different ways and works with non-jQuery DOM innerHTML property.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>

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

IF you use pure javascript, you access to inputs by an array, but if you need with jQuery you can make a loop:

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

console.log(arrFields);

good luck!

You can do this:

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

But this is absurd.

You could use jQuery .toArray():

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

You can't use .val() here, but .value will work fine.

A small example/proof of concept:

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

<script src="https://ajax.googleapis./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" />

Yes you could use .toArray()

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

Each html element, if it don't posess an id, isn't guarentee to have a unique selector.