如何从 DOM 元素创建具有键和值的对象数组？

Question

如何创建这样的对象数组？

let cars = [
  {
    color: "purple",
    type: "minivan",
    capacity: 5
  },
  {
    color: "red",
    type: "suv",
    capacity: 5
  },
  {
    ...
  },
  ...
]

 let cars = []; $(".car").each(function() { var color = $(this).data('color'); var type = $(this).data('type'); var capacity = $(this).data('capacity'); cars.push(); });

 .car { background: gold; padding: 10px; margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="car" data-color="purple" data-type="minivan" data-capacity="5"> Car 1</div> <div class="car" data-color="red" data-type="suv" data-capacity="5"> Car 2</div> <div class="car" data-color="green" data-type="sedan" data-capacity="2"> Car 3</div>

Answer 1

为了实现您的要求，您可以使用map()从元素上的所有data属性构建一个数组：

 let cars = $('.car').map((i, el) => el.dataset).get(); console.log(cars);

 .car { background: gold; padding: 10px; margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="car" data-color="purple" data-type="minivan" data-capacity="5"> Car 1</div> <div class="car" data-color="red" data-type="suv" data-capacity="5"> Car 2</div> <div class="car" data-color="green" data-type="sedan" data-capacity="2"> Car 3</div>

Answer 2

你做得对，你需要将元素对象推入数组

 let cars = []; $(".car").each(function() { var color = $(this).data('color'); var type = $(this).data('type'); var capacity = $(this).data('capacity'); cars.push({color, type, capacity}); }); console.log(cars)

 .car { background: gold; padding: 10px; margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="car" data-color="purple" data-type="minivan" data-capacity="5"> Car 1</div> <div class="car" data-color="red" data-type="suv" data-capacity="5"> Car 2</div> <div class="car" data-color="green" data-type="sedan" data-capacity="2"> Car 3</div>