CODEWITHSUNDEEP
jqueryhtmldom
Tony Starkus
Tony Starkus

Reputation: 576

set id to img using jQuery each

I'm triyng to set id's to my img's tags using jQuery each(), but i don't know why it's not working.

<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>

I searched how to use each(), but when i load the page, the img's tag don't have any id.

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

Sorry my bad english.

Upvotes: 0

Views: 320

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21648

Works fine for me are you wrapping it in a ready function to make sure the DOM is ready? $() or $.ready() takes a function that runs once the DOM is ready, running before the DOM is ready and your selectors wont find anything.

$(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>

Upvotes: 3

Related Questions