jQuery добавляет элемент к каждому div +, отображает его ID

Question

Я пытаюсь добавить кнопку к каждому div с определенным классом, мой код пока:

HTML:

<div id="865" class="gw-gopf-isotope-item">
 <div class="gw-gopf-post-overlay-inner">
  // button goes here
 </div>
</div>

JQuery:

$( ".gw-gopf-isotope-item" ).each(function() {
 var gallid = $(this).attr('id');
 $('.gw-gopf-post-overlay-inner').append('<a class=\"gw-gopf-btn gw-gopf-post-overlay-btn thickbox\" href=\"#TB_inline?width=600&height=550&inlineId=gallery-\"+gallid+\"\">View Photos</a>');
});

Как это работает:

• пользователь создает галерею в админке
• они отображаются на веб-интерфейсе
• другой сценарий, который я написал, создает набор материалов, уникальных для каждой галереи
• кнопка предназначена для ссылки на этот уникальный толстый ящик

Код добавления работает нормально, но он не генерирует уникальный идентификатор для каждой ссылки, поэтому я думаю, что мне нужно использовать каждую функцию?

Я должен сделать это с помощью jQuery, так как он вносит изменения в готовую систему, которую я не могу изменить, чтобы добавить код напрямую.

Любая помощь очень ценится

Answer 1

Так как вы используете ' как разжижитель и избегающие цитаты \"ты пропускаешь два раза ' вокруг '+gallid+'

Так должно быть:

$('.gw-gopf-post-overlay-inner').append('<a class=\"gw-gopf-btn gw-gopf-post-overlay-btn thickbox\" href=\"#TB_inline?width=600&height=550&inlineId=gallery-'+gallid+'\">View Photos</a>');

Если вы все еще не получаете идентификатор, отладьте его.

Вы можете увидеть, если gallid генерируется путем отправки его на консоль с console.log(gallid); внутри цикла.each

$( ".gw-gopf-isotope-item" ).each(function() {
 var gallid = $(this).attr('id');
 console.log(gallid);
...

});

Посмотрите на эту скрипку:

https://jsfiddle.net/a4zh87jg/4/ Это правильно с вашим кодом!