试图为锚标记添加id创建的时候李标签

Question

我有以下JS提琴https://jsfiddle.net/73rpubfd/工作良好。将代码粘贴到此处以供参考:

<ul class="nav nav-tabs" id="test">
</ul>
var items=['a1','a2'];
var arrayLength = items.length;
for (var i = 0; i < arrayLength; i++) {

$("#test").append("<li><a>"+items[i]+"</a></li>");

}

我的要求是为标签插入一个id, id值的一部分将来自数组值。

所以，我希望它在循环中是这样的:

$("#test").append("<li><a id="tab_"+items[i]+">"+items[i]+"</a></li>");

在chrome的开发人员工具中检查li元素后，它基本上看起来像这样。

<li><a id="tab_a1">a1</a></li>
<li><a id ="tab_a2">a2</a></li>

但是当我试图定义' id = tab_"它开始抱怨。我做错了什么吗?

Answer 1

我认为这是html道具需要双引号格式的问题。创建复杂字符串的最佳方法是使用模板字面值，如下所示:

$("#test").append(`<li><a id="tab_${items[i]}">${items[i]}</a></li>`);

Answer 2

使用模板字面值可以包含由${expression}指示的占位符，并且可以用于字符串插值

var items=['a1','a2'];
var arrayLength = items.length;
for (var i = 0; i < arrayLength; i++) {
const li = `<li><a id="tab_${items[i]}">${items[i]}</a></li>`;
$("#test").append(li);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="test">
</ul>

或者在一行中不使用jQuery

使用数组映射方法，将每个数组项转换为lihtml，最后以空连接。

const html = items.map(item => `<li><a id="tab_${item}">${item}</a></li>`).join('');
$("#test").append(html);

Answer 3

如果双引号出现在另一个引号中，则需要转义。

$("#test").append("<li><a id="tab_">"+items[i]+"</a></li>");

另一个解决方案是使用反号:

$("#test").append(`<li><a id="tab_">${items[i]}</a></li>`);