Возврат данных из изображений в порядке

Question

Я довольно заржавел с моим (базовым) javascript, так что, надеюсь, я не пойму проблему полностью, но по сути я пытаюсь вернуть поле «alt» изображения в виде заголовка, добавленного кзаголовок для каждого изображения, и хотя я получаю по существу это, он возвращает список для всей последовательности изображений каждому вместо их собственного в последовательности.Код очень прост, поэтому, вероятно, он не работает.Любая помощь приветствуется

$('#projectThumbs img').each(function(){
  $('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
    });

Например, если изображения имеют последовательность заголовков «1», «2», «3», к каждому изображению теперь добавляется «1,2,3»вместо '1' в 1, '2' в 2 и т. д.

Структура изображений из html (в Squarespace, поэтому у меня нет доступа к исходному коду, только инъекция).Это в сетке изображений.

ETA: заметили несколько скрытых div в коде, может быть, счетчик-элемент-проекта может быть полезен каким-то образом?

<a class='project'>
    <div>
        <div class='project-image'>
            <div class='intrinsic'>
              <div class = 'content-fill'>
                 <img alt='example'>
              </div>
            </div>
          <div class='project-item-count'>
          </div>
        </div>
        <div class='project-title'>
            Title
        </div>
    </div>
</a>

Изображение того, что происходит, чтобы помочь прояснить

Answer 1

Атрибут id нельзя дублировать в элементах DOM, поэтому каждая функция не запускается на всех одинаковых элементах id, если вы используете атрибут класса с одинаковым именем и используете каждую функцию, то ваша проблема решена. Надеюсь, она вам поможет.

$('#projectThumbs img').each(function(){
  $('.project-title').append("<p>" + $(this).attr('alt') + "</p>");
    });

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <div id="projectThumbs">
    <img alt="myimae" 
src="http://psdandcode.com/themes/psd2code/images/logo.png">
    <img alt="mimage" 
 src="http://psdandcode.com/themes/psd2code/images/logo.png">
    <img alt="myimae" 
  src="http://psdandcode.com/themes/psd2code/images/logo.png">
    <img alt="myimag" 
 src="http://psdandcode.com/themes/psd2code/images/logo.png">

</div>
<div class="project-title"></div>

Answer 2

$('.project-image img').each(function(){
  $(this).parents('.project-image').next().append("<div>" + $(this).attr('alt') + "</div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='project'>
    <div>
        <div class='project-image'>
            <div class='intrinsic'>
              <div class = 'content-fill'>
                 <img src="https://picsum.photos/200" alt='example1'>
              </div>
            </div>
          <div class='project-item-count'>
          </div>
        </div>
        <div class='project-title'>
            Title
        </div>
    </div>
</a>
<a class='project'>
    <div>
        <div class='project-image'>
            <div class='intrinsic'>
              <div class = 'content-fill'>
                 <img src="https://picsum.photos/200" alt='example2'>
              </div>
            </div>
          <div class='project-item-count'>
          </div>
        </div>
        <div class='project-title'>
            Title
        </div>
    </div>
</a>

Answer 3

Предполагая, что HTML содержит действительный элемент #projectThumbs, проблема в том, что вы неправильно нацеливаетесь на элементы .project-title.

Это необходимо сделать с помощью parent() (чтобы найтиродительский элемент), а затем используйте siblings(), чтобы найти правильного брата (которому назначен project-title класс).

См. демонстрацию ниже:

$('#projectThumbs img').each(function() {
  $(this).parent().siblings('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectThumbs">
  <a class='project'>
    <div>
      <div class='project-image'>
        <img alt='example'>
      </div>
      <div class='project-title'>
        Title
      </div>
    </div>
  </a>
</div>