Question

我正在尝试从div列表中获取数据属性，并将其添加到jquery数组中。每次循环浏览时，我都会得到空数据。在我对创建的数组进行测试时，select元素将起作用。这是一个菜鸟问题，对不起，但我正在转圈。

<html>
<body>
<div class="poop" data-colour="blue"> blue </div>
<div class="poop" data-colour="green"> green </div>
<div class="poop" data-colour="yellow"> yellow </div>
<div class="new-select"></div>
<script>
var data2 = [];
$('.poop').each(function(){
  var $this = $(this);
  arr.push([ $this.data('colour') ]);
});
var s = $('<select />');
for(var val in data2) {
    $('<option />', {value: val, text: data[val]}).appendTo(s);
}

s.appendTo('.new-select');
    </script>
</body>
</html>

Answer 1

您的逻辑中有几个问题，主要与定义的变量有关，以及如何/不使用它们。例如，您从未将arr定义为要推送到的数组，data2始终为空，因为您从未对其进行任何操作，并且data也未定义，因此data[val]将导致一个错误。最后，与数组一起使用时，您使用的for循环变量会出现问题。

要整理逻辑，可以使用map()以字符串形式构建option元素的数组，然后将其应用于使用select创建的html()，像这样；

var html = $('.poop').map(function() {
  var col = $(this).data('colour');
  return `<option value="${col}">${col}</option>`;
}).get().join('');

var $s = $('<select />').html(html);
$s.appendTo('.new-select');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="poop" data-colour="blue">blue</div>
<div class="poop" data-colour="green">green</div>
<div class="poop" data-colour="yellow">yellow</div>
<div class="new-select"></div>

此逻辑避免了必须使用两个循环。如果您希望有多个循环来分别创建颜色阵列，则仍可以使用map()，如下所示：

var colours = $('.poop').map(function() {
  return $(this).data('colour');
}).get();

var $s = $('<select />');
colours.forEach(function(colour) {
  $s.append(`<option value="${colour}">${colour}</option>`);
});
$s.appendTo('.new-select');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="poop" data-colour="blue">blue</div>
<div class="poop" data-colour="green">green</div>
<div class="poop" data-colour="yellow">yellow</div>
<div class="new-select"></div>

Answer 2

不需要var $this = $(this)行，因为在这种情况下，我们不需要保留先前的this变量（我们将没有新的作用域，因此也没有新的this）。 / li>
arr变量从未定义，因此我只使用了data2。
要获取由3个元素组成的数组（['blue, 'green', 'yellow']，应仅将每个值传递给push方法。但是通过push([ $this.data('colour') ])，您将得到一个由3个数组组成的数组（[ ['blue'], ['green'], ['yellow'] ]）。
尽管我不想更改代码的所有部分，但是根据this和朋友的评论，您应该仅将for...in用于对象而不是数组。您可以改用for...of。

希望能提供帮助。

var data2 = [];
$('.poop').each(function(){
  data2.push($(this).data('colour'));
});

console.log(data2) // ["blue", "green", "yellow"]

var s = $('<select />');
for(var val of data2) {
    $('<option />', {value: val, text: data2[val]}).appendTo(s);
}

s.appendTo('.new-select');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="poop" data-colour="blue"> blue </div>
<div class="poop" data-colour="green"> green </div>
<div class="poop" data-colour="yellow"> yellow </div>
<div class="new-select"></div>

将数据属性添加到jQuery数组

2 个答案: