javascript - 如何在 jquery 中从多个选择器创建对象？

Question

我有两个元素(html 中的#list1、#list2)。我需要创建对象并从这两个元素填充它。 例如:

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

类似这样的事情。因此它可以在每次迭代时将这些元素添加到数组中。如何做到？

Answer 1

1. 它是.val()
2. 您可以推送或映射
3. 您可以使用类，因此无需列出

注意:如果字段上没有 value 属性，请在 .get 示例中使用 this.getAttribute("value")将导致从数组中省略任何没有值属性的字段，而不是添加空值(感谢@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" />