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>')被添加了三次到数组，它是相同的引用。因此，当您执行.addClass()和.append()时，您正在使用相同的span元素。

Answer 2

在array中添加类并使用array循环遍历for可能会更清晰，更易读：

＆＃13;

var arr = ['u-label', 'u-title', 'u-info'];

for(var i = 0; i< arr.length; i++){
  $('div').append('<span class="' + arr[i] + '">test</span><br />');
}

＆＃13;

.u-label{
  color: #F00;
}
.u-title{
  color: #1e8c55;
}

＆＃13;

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

＆＃13;

Answer 3

$('ul').append(Array.from(new Array(3)).map(x => $('<li>test</li>')).map((el, index)=>el.addClass(['u-label','u-title','u-info'][index])));

JavaScript数组映射不适用于addClass

3 个答案: