querySelectorAll не работает с data-srcset

Question

Я хочу применить класс ко всем горизонтальным imgs на веб-сайте.

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

$(function() { 
 
    var images = document.querySelectorAll('[data-srcset]'); 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].naturalWidth > images[i].naturalHeight) { 
 
     $(images[i]).addClass('horizontal'); 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://cdn.pixabay.com/photo/2015/02/18/11/50/mountain-landscape-640617_960_720.jpg" alt=landscape>

Answer 1

Это лучше заменить alt=landscape с alt="landscape".

оба

var images = document.querySelectorAll('[data-srcset]'); 

и

var images = $('[data-srcset]'); 

работает для меня.

Ваша проблема в том, является ли утверждение неверным. он всегда идет в else.

Попробуйте обновить инструкцию if по следующему коду.

if (images[i].naturalWidth > images[i].naturalHeight) { 
    $(images[i]).addClass('horizontal'); 
    console.log(images[i]); 
} else { 
    console.log('else'); 
} 

Вы увидите, что он всегда идет в другое место.

Answer 2

Это потому, что предоставленное вами изображение data:... 1x1, и поэтому проверка на images[i].naturalWidth > images[i].naturalHeight не удалась.

Имейте в виду, что если вы используете атрибут srcset (вместо data-srcset), которая по умолчанию будет работать, как и ожидалось (но вы должны использовать load событие страницы).

---

$(window).load(function() { 
 
    var images = document.querySelectorAll('[srcset]'); 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].naturalWidth > images[i].naturalHeight) { 
 
     $(images[i]).addClass('horizontal'); 
 
    } 
 
    } 
 
})

.horizontal{border:10px solid OliveDrab;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/400x200" alt=landscape> 
 

 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/200x210" alt=landscape>