在具有相同类的div中显示替代文本（jQuery）

Question

我想展示我的imgs替代文本和我的div是同一个类。 我的操作方式仅显示所有div上的第一张图片，有人可以帮助我吗？

我的代码：

<div id="tela">
    <div class="folha"><img src="img/1.jpg" alt="Rondo Alla turca"></div>
    <div class="folha"><img src="img/2.jpg" alt="Fur Elise"></div>
    <div class="folha"></div>
    <div class="folha"></div>
    <div class="folha"></div>
    <div class="folha"></div>
</div>
<script>
    $(document).ready(function(){
        var alt = $('#tela .folha img').attr('alt');
        var p = $('<p></p>');
        var div = $('.folha');
        $('.folha:has(img)').append(p);
        $('p',this).addClass('title').text(alt);

    });
</script>

Answer 1

您必须使用each()遍历图像。

这是一个片段。

 $('#tela .folha img').each(function() { var alt = $(this).attr('alt'); $(this).parent().append('<p class="title">' + alt + '</p>') }); 

 .folha { margin-bottom : 5px; background-color : red; padding : 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tela"> <div class="folha"><img src="img/1.jpg" alt="Rondo Alla turca"></div> <div class="folha"><img src="img/2.jpg" alt="Fur Elise"></div> <div class="folha"></div> <div class="folha"></div> <div class="folha"></div> <div class="folha"></div> </div> 

Answer 2

您需要一个循环，例如使用.each() ， this循环引用要循环的特定元素：

 $(document).ready(function() { $('.folha:has(img)').each(function() { var alt = $(this).find('img').attr('alt'); var p = $('<p></p>').addClass('title').text(alt); $(this).append(p); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tela"> <div class="folha"><img src="img/1.jpg" alt="Rondo Alla turca"></div> <div class="folha"><img src="img/2.jpg" alt="Fur Elise"></div> <div class="folha"></div> <div class="folha"></div> <div class="folha"></div> <div class="folha"></div> </div>