установить id на img, используя jQuery каждый

Question

Мне не терпится установить id для тегов моего img, используя jQuery each (), но я не знаю, почему это не работает.

<div class="row" id="album">
    <a class="col-md-4 picture" style="padding-bottom: 5px;">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture" style="padding-bottom: 5px;">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture" style="padding-bottom: 5px;">
      <img src="link" class="img-fluid rounded">
    </a>


    <a class="col-md-4 picture">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture">
      <img src="link" class="img-fluid rounded">
    </a>

</div>

Я искал, как использовать each (), нокогда я загружаю страницу, тег img не имеет идентификатора.

$('#album img').each( function(index){
    $(this).attr("id", index);
  });

Извините, мой плохой английский.

Answer 1

Работает нормально для меня, вы завернули его в готовую функцию, чтобы убедиться, что DOM готов?$ () или $ .ready () принимает функцию, которая запускается, когда DOM готов, работает до того, как DOM готов, и ваши селекторы ничего не найдут.

$(function() {
    $('#album img').each( function(index){
        $(this).attr("id", index);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="album">
    <a class="col-md-4 picture" style="padding-bottom: 5px;">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture" style="padding-bottom: 5px;">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture" style="padding-bottom: 5px;">
      <img src="link" class="img-fluid rounded">
    </a>


    <a class="col-md-4 picture">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture">
      <img src="link" class="img-fluid rounded">
    </a>
    <a class="col-md-4 picture">
      <img src="link" class="img-fluid rounded">
    </a>

</div>