Catch value in Javascript/Jquery loop

Question

How can I print the value of each alt in the 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>

Answer 1

Since you’re using jQuery, could you use the .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>

The code $("img", this).attr("alt") will search in each element .filho inside .pai the tag img and its associated attribute alt.

Answer 2

The problem is, with the line down:

 var teste = $(elementos[i].className).attr('alt');

You are selecting the div where the image is contained. So, when you capture the attribute alt of this element, you receive nothing, since the div has no attribute alt.

Logo, you could fix the code by selecting the images:

var elementos = $('.pai .filho > img');

Thus remaining:

<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>

If you want to search for the child element within the loop for, can do so:

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>