Split jQuery collection into an array of individual jQuery objects

Question

I am wondering if there is a way to split a jQuery selector that contains a set 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 build or convert fields into an array of selectors, so I can just use

fields[index].val()

Edit:

Yes, I understand that you can use .toArray (), but as mentioned below, this returns an array of DOM elements. Then you have to iterate over them to convert them to selectors - too much extra work.

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

.

Answer 2

?

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

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

.

Answer 3

javascript, , jQuery, :

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

console.log(arrFields);

!

Answer 4

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

Hide result

Answer 5

jQuery toArray() function jQuery.makeArray() function.
DOM.

, toArray jQuery :

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

$.makeArray . , , JS.

,

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

array-like 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>

Hide result

Answer 6

, . toArray()

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

Answer 7

html, , .