0

Como posso imprimir o valor de cada alt no for?

<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');
var countElementos = elementos.length;
var intervalo = 1;
var comeco = 0;

for(var i = comeco; i < countElementos; i += intervalo) {
    var teste = $(elementos[i].className).attr('alt');
    console.log(teste);
}

</script>

2 Respostas 2

2

Já que está usando jQuery, poderia usar o .each():

$(".pai .filho").each(function(){
   var teste = $("img", this).attr("alt");
   console.log(teste);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

O código $("img", this).attr("alt") irá buscar em cada elemento .filho dentro de .pai a tag img e seu respectivo atributo alt.

1

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>

3
  • Isso resolveria, mas a logica seria acessar o elemento pai pra depois buscar o filho, no caso o alt
    – Josimara
    Commented 18/08/2019 às 23:41
  • Editei a resposta adicionando mais um exemplo ao final. Seria isso? ;) Commented 18/08/2019 às 23:44
  • children! exatamente isso, valeu!
    – Josimara
    Commented 19/08/2019 às 0:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .