Split jQuery collection into an array of individual jQuery objects

Question

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.

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
– Rory McCrossan, Commented Jul 3, 2015 at 7:54
@RoyiNamir true, but that's using a jQuery object to get a DOMElement to turn it back in to a jQuery object, which is completely redundant. — Rory McCrossan
– Rory McCrossan, Commented Jul 3, 2015 at 7:57
@RoryMcCrossan I think he wants the [] access . it's possible. but it has a cost. As in general - I think your comment is right. no need to add extra features. — Royi Namir
– 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 command, but for selector collections. — Jhacker
– Jhacker, Commented Jul 3, 2015 at 8:36

Dave Salomon · Accepted Answer · 2015-07-03 08:06:08Z

3

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.

edited Jul 3, 2015 at 8:06

answered Jul 3, 2015 at 7:59

Dave Salomon

3,2771 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jhacker Over a year ago

Perfect! But unfortunately not standard in jQuery. They should add it.

Yeldar Kurmangaliyev · Accepted Answer · 2015-07-03 08:06:24Z

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

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

asontu · Accepted Answer · 2015-07-03 08:34:48Z

2

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!

edited Jul 3, 2015 at 8:34

asontu

4,6591 gold badge24 silver badges30 bronze badges

answered Jul 3, 2015 at 7:53

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Comments

Salman Arshad · Accepted Answer · 2015-07-03 08:34:50Z

1

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.

edited Jul 3, 2015 at 8:34

answered Jul 3, 2015 at 8:27

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

3 Comments

Jhacker Over a year ago

I tried this and it doesn't quite work. The data types appear to be correct but then fields[0].val() doesn't work.

Jhacker Over a year ago

Hmm that does seem to work, I must have had something else wrong in my code. But isn't .get() supposed to return DOM objects?

Salman Arshad Over a year ago

.get() simply returns a JavaScript array of all elements. In the above example, each element is a jQuery object which contains a single DOM element.

Mackan · Accepted Answer · 2015-07-03 08:14:36Z

1

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.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" />

edited Jul 3, 2015 at 8:14

answered Jul 3, 2015 at 7:55

Mackan

6,2712 gold badges29 silver badges46 bronze badges

Comments

itacode · Accepted Answer · 2015-07-03 08:09:47Z

0

Yes you could use .toArray()

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

answered Jul 3, 2015 at 8:09

itacode

3,7873 gold badges23 silver badges25 bronze badges

Comments

Remy Grandin · Accepted Answer · 2015-07-03 07:55:09Z

-2

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

answered Jul 3, 2015 at 7:55

Remy Grandin

1,5961 gold badge14 silver badges36 bronze badges

Collectives™ on Stack Overflow

Split jQuery collection into an array of individual jQuery objects

Edit:

7 Answers 7

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

7 Answers 7

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related