JavaScript 数组映射不适用于 addClass

Question

我想创建这样的 HTML 元素

<div>
    <span class="u-label"></span>
    <span class="u-title"></span>
    <span class="u-info"></span>
</div>

我使用javascript代码$('div').append(Array(3).fill($('<span>test</span>')).map((el, index) => el.addClass(['u-label', 'u-title', 'u-info'][index])));

但是，它不起作用。它只返回 <div><span class="u-label u-title u-info">test</span></div>

https://jsfiddle.net/paq8tdfL/

Answer 1

这也有效:

$('div').append(Array(3).fill().map((el, index) => $('<span>test</span>').addClass(['u-label','u-title','u-info'][index])));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

你的问题是$('<span>test</span>')被添加到数组中 3 次，它是相同的引用。所以当你这样做 .addClass()和.append()你正在做同样的事情span元素。