У меня работает следующий https://jsfiddle.net/73rpubfd/ следующий скрипт JS. Вставьте код сюда для справки:

<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>");
    
}

Мое требование - вставить идентификатор для тега, и часть значения идентификатора будет поступать из значений массива.

Итак, я ожидал, что внутри цикла будет так:

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

И в основном это, вероятно, будет выглядеть примерно так после проверки элемента li в инструментах разработчика Chrome.

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

Но как только я пытаюсь определить id = tab_, он начинает жаловаться. Я что-то делаю не так?

1
buildingcode543 6 Окт 2021 в 15:52

3 ответа

Лучший ответ

Я думаю, что это проблема формата html-реквизита, требующего двойных кавычек. Лучший способ создавать сложные строки - использовать такие шаблонные литералы:

$("#test").append(`<li><a id="tab_${items[i]}">${items[i]}</a></li>`);
2
ziishaned 6 Окт 2021 в 13:31

Использование литералов шаблона может содержать заполнители, обозначенные ${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

Используйте метод и преобразование массива map каждый элемент массива в li html и, наконец, присоединиться пустым.

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

$("#test").append(html);
1
navnath 6 Окт 2021 в 13:13

Вам нужно избегать двойных кавычек, если они встречаются внутри других кавычек.

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

Другое решение - использовать обратные кавычки:

$("#test").append(`<li><a id="tab_">${items[i]}</a></li>`);
1
ziishaned 6 Окт 2021 в 13:31