O problema é que, com a linha abaixo:
var teste = $(elementos[i].className).attr('alt');
Você está selecionando a div
em que a imagem está contida. Logo, quando você captura o atributo alt
desse elemento, você não recebe nada, já que a div
não possui atributo alt
.
Logo, você poderia corrigir o código selecionando as imagens:
var elementos = $('.pai .filho > img');
Ficando assim:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pai">
<div class='filho'>
<img alt="alt1">
</div>
<div class='filho'>
<img alt="alt2">
</div>
<div class='filho'>
<img alt="alt3">
</div>
<div class='filho'>
<img alt="alt4">
</div>
</div>
<style>
.filho {
background: black;
color: white;
margin: 20px;
text-align: center;
font-size: 28px;
font-weight: bold;
}
</style>
<script>
var elementos = $('.pai .filho > img');
var countElementos = elementos.length;
var intervalo = 1;
var comeco = 0;
for(var i = comeco; i < countElementos; i += intervalo) {
var teste = $(elementos[i]).attr('alt');
console.log(teste);
}
</script>
Se você quiser buscar o elemento filho dentro do laço for
, pode fazer assim:
var elementos = $('.pai .filho');
var countElementos = elementos.length;
var intervalo = 1;
var comeco = 0;
for(var i = comeco; i < countElementos; i += intervalo) {
// Note abaixo que adicionei o "children".
// Também removi o `className`, já que o `elementos[i]` já é suficiente para que o jQuery reconheça o elemento:
var teste = $(elementos[i]).children('img').attr('alt');
console.log(teste);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pai">
<div class='filho'>
<img alt="alt1">
</div>
<div class='filho'>
<img alt="alt2">
</div>
<div class='filho'>
<img alt="alt3">
</div>
<div class='filho'>
<img alt="alt4">
</div>
</div>