在每个循环上创建数组对象

Question

我试图为id为#user的每个元素创建一个ddData对象，但由于某种原因它只是显示最后一个对象。

这是我的js：

var count = $('*#user').length;
ddData = [];
i = 1;
$.each($('*#user'), function () {
    for (i = 1; i <= count; i++) {
        $names = $(this).html();
        ddData = [{
            text: $names,
            value: i++,
            imageSrc: "images/usuari.png"
        }];

        console.log($names);
    }
});

$('#usuarisLlista').ddslick({
    data: ddData,
    width: "200px",
    imagePosition: "left",
    selectText: "Selecciona un usuari"

});

所以console.log（names）输出了3个元素（元素的数量可以增加，所以它不能是固定的数字）：

但是，它只显示最后一个：

谁能告诉我为什么我没有正确地进行循环？我试图找到解决方案，我在旧帖子中发现我可以使用push（），但我无法理解在我的代码中将其添加到哪里：S

谢谢！

Answer 1

使用push在数组中添加新元素

ddData.push({
    text: $names,
    value: i++,
    imageSrc: "images/usuari.png"
});

何时

ddData = [{
    text: $names,
    value: i++,
    imageSrc: "images/usuari.png"
}];

使用

，变量将使用指定的值重新初始化。因此，在循环之后，只有最后一个元素将出现在数组中。

还有一件事是选择标识为user的元素的选择器不正确。

var count = $('*#user').length; // Remove * from this

代码包含重复的ID。 ID应该是唯一的，使用class而不是id。

Demo

$(document).ready(function() {

  var ddData = [];
  var i = 0;
  $.each($('.user'), function() {
    var names = $(this).html();
    ddData.push({
      text: names,
      value: i++,
      imageSrc: "images/usuari.png"
    });
    console.log(names);
  });

  $('#userList').ddslick({
    data: ddData,
    width: "200px",
    imagePosition: "left",
    selectText: "Select a user"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.js"></script>
<table>
  <tr>
    <td class="user">Evelia Molina</td>
    <td class="user">Andy Gon</td>
    <td class="user">Berta Belgrat</td>
  </tr>
</table>
<div id="userList"></div>