尝试使用jquery / javascript遍历图像并更改div ID中的src url

Question

Trying to iterate through all the images in a DIV class and change them out according to the landscape/portrait mode which detects from a function im not sure why it isnt working

   for(var i = 0; i < $('#imgChange').children().length; i++){
        var img = $('#imgChange').children[i];
        // deviceOrientation - imageDimensions
        // portrait-landscape, portrait-portrait, landscape-portrait, landscape-landscape
        // img.children[i].attr('src','image' + i + '-' + orientationCheck() + '.png');

        img.children[0].attr('src','image' + i + '-' + orientationCheck() + '.png');


    }

}

Testing the first image. The rest havent been changed out yet

 <div class="content" id="imgChange" custom-bg="1542111504805.png" >
 <img src="image0-portrait.png"/>
 </div>
 </div><div class="slide">
 <div class="content" id="imgChange" custom-bg="1542111396159.png" >
 <img src="1542110991156.png"/>
  </div>
  </div><div class="slide">
 <div class="content" id="imgChange" custom-bg="1542106085955.png" >
 <img src="1542110993877.png"/>
 </div>
 </div><div class="slide">
  <div class="content" custom-bg="1542106179480.png" >
 <img src="1542110996555.png">
  </div>

Answer 1

Your loop is going into children twice, and the actual image is only one level deep. Also as @Ahmed Hammad points out, you can't have duplicate id values on your elements - use a class instead.

for(var i = 0; i < $('.imgChange').length; i++){
  var img = $('.imgChange')[i];
  // deviceOrientation - imageDimensions
  // portrait-landscape, portrait-portrait, landscape-portrait, landscape-landscape
  // img.children[i].attr('src','image' + i + '-' + orientationCheck() + '.png');

  $(img.children[0]).attr('src','image' + i + '-' + orientationCheck() + '.png');
}

Answer 2

Shorter way to write this is using attr(attributeName, function) .

Assumes you replace the duplicate id's and change to class instead

$('.imgChange img').attr('src', function(_,i){
     return 'image' + i + '-' + orientationCheck() + '.png'
})

Answer 3

You don't need Jquery. Remember ID attribute values should be unique. You must not use id="imgChange" more than once. Try this:

 let imgs = document.querySelectorAll('.imgChange img') for(i=0;i<imgs.length;i++){ img = imgs[i]; img.src = "https://www.gravatar.com/avatar/ea55d4ade339de113b9720c933546564?s=48&d=identicon&r=PG&f=1" //img.attr('src','image' + i + '-' + orientationCheck() + '.png'); } 

 .imgChange{ border: 1px solid red; } 

 <div class="imgChange"> <img/> <div/> <div class="imgChange"> <img/> <div/>