Форум

Bicou · #1 (**permalink**) 15.08.2017, 22:12

Это мой первый код "с нуля". Пытаюсь разобраться как что должно работать и на определенном этапе возник тупик.
Итак, есть массив из div.class в каждом из них содержатся теги img. Задача перебрать в каждом див все img и найти среди них с расширением gif
Просто img во всем документе я перебрала успешно. Код работал

var mas=document.getElementsByTagName('img');
for(i=0; i<mas.length;i++)
{
   ext=mas[i].src.split(".").pop();
   if(ext=="gif"){
    mas[i].src="http://forumavatars.ru/img/avatars/0014/21/71/4-1403302678.png";
   } 
};

Теперь пытаюсь задать перебор только в конкретных div Пробовала разные коды, не срабатывает

var mas2=document.getElementsByClassName("container");
var mas=document.getElementsByTagName('img');

for (j=0;j<mas2.length;j++){
    
for(i=0; i<mas.length;i++)
{
   ext=mas[i].src.split(".").pop();
   if(ext=="gif"){
   mas2[j].mas[i].src="http://forumavatars.ru/img/avatars/0014/21/71/4-1403302678.png"; } 
   }  
    
   
}

Что не правильно делаю?

рони · #2 (**permalink**) 15.08.2017, 22:55

Bicou,

var mas2 = document.getElementsByClassName("container"),
    j, i, ext;
for (j = 0; j < mas2.length; j++) {
    var mas = mas2[j].getElementsByTagName("img");
    for (i = 0; i < mas.length; i++) {
        ext = mas[i].src.split(".").pop();
        if (ext == "gif") mas[i].src = "http://forumavatars.ru/img/avatars/0014/21/71/4-1403302678.png"
    }
};

Bicou · #3 (**permalink**) 15.08.2017, 23:01

Спасибо!
Так пробовала. но почему-то не получилось. Может быть что-то с ошибкой написала. Хотя в консоли ничего не выводилось. Пошла разбираться. Спасибо

j0hnik · #4 (**permalink**) 15.08.2017, 23:03

<html>
<head>
<style>
</style>
</head>
<body>
<div class="container">
	<img src="1.gif" alt="">
	<img src="1.png" alt="">
	<img src="2.gif" alt="">
	<img src="2.png" alt="">
</div>
	<script>
[].forEach.call(document.querySelectorAll('.container img[src$=".gif"]'), function (el){
 el.src = 'http://forumavatars.ru/img/avatars/0014/21/71/4-1403302678.png';
});
	</script>
</body>
</html>

можно проще

j0hnik · #5 (**permalink**) 15.08.2017, 23:05

<html>
<head>
<style>
</style>
</head>
<body>
<div class="container">
	<img src="1.gif" alt="">
	<img src="1.png" alt="">
	<img src="2.gif" alt="">
	<img src="2.png" alt="">
</div>
	<script>
document.querySelectorAll('.container img[src$=".gif"]').forEach(el => el.src = 'http://forumavatars.ru/img/avatars/0014/21/71/4-1403302678.png');
	</script>
</body>
</html>

для современных браузеров

Bicou · #6 (**permalink**) 15.08.2017, 23:31

j0hnik, спасибо

laimas · #7 (**permalink**) 16.08.2017, 00:17

Сообщение от j0hnik

для современных браузеров

Для имеющих поддержку. Обратите внимание на Android, который занимает приличную долю рынка.

j0hnik · #8 (**permalink**) 16.08.2017, 01:18

и опера и сафари уже поддерживают
https://caniuse.com/#search=arrow

не на то акцент делаете, такая конструкция

document.querySelectorAll(el).forEach

имеет меньшую поддержку чем стрелки.

laimas · #9 (**permalink**) 16.08.2017, 01:42

Сообщение от j0hnik

и опера и сафари уже поддерживают

Ваши устами да мед пить. К сожалению в реальности не все так радужно как хотелось бы. Пока разработчики не объявят бойкот вместо поддержки всего и вся, эта хрень будет продолжаться еще долго.

Форум

Справочник

Discord чат

Курсы javascript