CODEWITHSUNDEEP
javascriptjquery
Jhacker
Jhacker

Reputation: 71

Split jQuery collection into an array of individual jQuery objects

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.

Upvotes: 4

Views: 2169

Answers (7)

Salman Arshad
Salman Arshad

Reputation: 272076

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.

Upvotes: 1

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

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!

Upvotes: 2

Mackan
Mackan

Reputation: 6271

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

Upvotes: 1

itacode
itacode

Reputation: 3787

Yes you could use .toArray()

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

Upvotes: 0

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

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>

Upvotes: 2

Dave Salomon
Dave Salomon

Reputation: 3297

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.

Upvotes: 3

Remy Grandin
Remy Grandin

Reputation: 1686

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

Upvotes: -2

Related Questions