如何从jQuery中的多个选择器创建对象？

Question

I have two elements (#list1, #list2 in html) . I need to create object and populate it from these two elements. For example:

$('#list1, #list2').each(function(index,value){ 
  var object =[ {#list1.value, #list2.value} ]; 
})

Something like that. So it can add these elements to array with each iteration. How it can be done?

Answer 1

1. it is .val()
2. you can push OR you can map
3. You can use a class so you do not need to list

NOTE: If there is no value attribute on the field, using this.getAttribute("value") on the .get examples will result in any field without value attribute to be omitted from the array instead of adding an empty value (Thanks @adz5A)

http://jsfiddle.net/mplungjan/jLsa80m9/7/

---

 var object1 = []; $('#list1, #list2').each(function() { object1.push($(this).val()) }) console.log(object1); // Smarter: var object2 = $('#list1, #list2') .map(function(index,$list) { return $list.value; // or this.value or $(this).val(); }) .get(); console.log(object2); // EVEN Smarter: var object3 = $('.list') .map(function() { return this.value; }) .get(); console.log(object3); // The two following versions were posted by @rmn - I include them here for // completeness sake. Upvote his answer if you like them // ES6 with jQuery var object4 = $('#list1, #list2').get().map(el => el.value) console.log(object4); // ES6 without jQuery var object5 = [...document.querySelectorAll('#list1, #list2')].map(el => el.value) console.log(object5); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value="value1" id="list1" class="list" /> <input type="text" value="value2" id="list2" class="list" /> 

Answer 2

I think you are looking for .get() . It returns as an array the set of matched DOM elements. You can easily combined this with map to retrieve the value of some attribute for instance

$("selector").map(function () { return this.getAttribute("value"); }).get();   

Will get you the value attribute for the selection into an array. Note that you can use arrow function inside map as the second argument is the dom node itself, in my example the dom element is bounded to the lexical context this .

Answer 3

With jQuery

$('#list1, #list2').get().map(el => el.value)

Without jQuery

[...document.querySelectorAll('#list1, #list2')].map(el => el.value)

Answer 4

you can create array outside the loop and push it on each iteration

var object =[];
$('#list1, #list2').each(function(){ 
  object.push($(this).val()); 
});

Answer 5

If you want to have id in your object, this is better:

 function getList(){ var list = [] $("#input1, #input2").each(function(){ list.push({id: this.id, value: this.value }); }); console.log(list); /* OUTPUT: [ { "id": "input1", "value": "v1" }, { "id": "input2", "value": "v2" } ] */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="input1" type="text" value="v1" /> <input id="input2" type="text" value="v2" /> <input type="button" onclick="getList()" value="get list" />