Question

我想展示我的imgs alt文本和我的div是同一个类。我正在做的方式只显示所有div上的第一张图片的alt，有人可以帮助我吗？

我的代码：

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

在具有相同类的div中显示Alt文本（Jquery）

2 个答案: