每个循环中的 jquery 将内容附加到特定类

Posted 2023-03-16

【中文标题】每个循环中的 jquery 将内容附加到特定类

【英文标题】：jquery in each loop append content to specific class

【发布时间】：2017-02-21 21:17:28

【问题描述】：

如何在每个循环的 thr jquery 中附加有关特定类的内容。

我想在每个 ppp 类的每个 strong>Hello 中附加。 但是这段代码不起作用$(item)(.'ppp').append( "<strong>Hello</strong>" );

这里是完整的例子

$('.testimonial').each(function(index, item) 
  var im = $('img').attr('src');
  var iml = im.lenght;
  var divpp = $('.ppp');
  if (parseInt($(item).data('index')) > 0) 

    $(item).html('Testimonial ' + (index + 1) +
      '<span class="img-code"><input type="text" value=\'' + im + '\'></span> <br>');
    $(item)(.
      'ppp').append("<strong>Hello</strong>");

  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="testimonial" data-index="1">
  Testimonial
  <div class="ppp" style="background-color:purple;"></div>
  <img src="upload/IMG_20160721_143235(1).jpg" class="imgpfad" >
</div>
<div class="testimonial" data-index="2">
  Testimonial 2
  <div class="ppp" style="background-color:purple;"></div>
  <img src="upload/IMG_20160721_143235(2).jpg" class="imgpfad" >

</div>
<div class="testimonial" data-index="3">
  Testimonial 3
  <img src="upload/IMG_20160721_143235(3).jpg" class="imgpfad" >
  <div class="ppp"></div>
</div>
<div class="testimonial" data-index="4">
  Testimonial 4
  <img src="upload/IMG_20160721_143235(4).jpg" class="imgpfad" >
  <div class="ppp"></div>
</div>
<div class="testimonial" data-index="5">
  Testimonial 5
  <img src="upload/IMG_20160721_143235(5).jpg" class="imgpfad" >
  <div class="ppp"></div>
</div>

【问题讨论】：

我很好奇，你希望$(item)(.'ppp') 做什么？这是无效的语法...

我该怎么做 $(item, .'ppp') 不起作用

需要是$(item).find(.'ppp')，但是当你使用$(item).html('...') 时你会清除这些元素中的所有内容，这样就不会找到任何.ppp

它可能也应该是$(item).find('img').attr('src')。否则每次循环都会得到第一张图片的src。

还有lenght != length

【参考方案1】：

将推荐号码放在自己的<span> 中，这样您就可以更改其 HTML 而不会影响 DIV 的其余内容。并使用.find()在循环中访问当前DIV中的其他元素。

使用.data() 时无需致电parseInt()。如果数据可以解析为 JSON，jQuery 会自动解析。

$('.testimonial').each(function(index, item) 
  var im = $(item).find('img').attr('src');
  var iml = im.length;
  var divpp = $(item).find('.ppp');
  if ($(item).data('index') > 0) 

    $(item).find('.title').html('Testimonial ' + (index + 1) +
      '<span class="img-code"><input type="text" value=\'' + im + '\'></span> <br>');
    divpp.append("<strong>Hello</strong>");

  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="testimonial" data-index="1">
  <span class="title">Testimonial</span>
  <div class="ppp" style="background-color:purple;"></div>
  <img src="upload/IMG_20160721_143235(1).jpg" class="imgpfad" >
</div>
<div class="testimonial" data-index="2">
  <span class="title">Testimonial 2</span>
  <div class="ppp" style="background-color:purple;"></div>
  <img src="upload/IMG_20160721_143235(2).jpg" class="imgpfad" >

</div>
<div class="testimonial" data-index="3">
  <span class="title">Testimonial 3</span>
  <img src="upload/IMG_20160721_143235(3).jpg" class="imgpfad" >
  <div class="ppp"></div>
</div>
<div class="testimonial" data-index="4">
  <span class="title">Testimonial 4</span>
  <img src="upload/IMG_20160721_143235(4).jpg" class="imgpfad" >
  <div class="ppp"></div>
</div>
<div class="testimonial" data-index="5">
  <span class="title">Testimonial 5</span>
  <img src="upload/IMG_20160721_143235(5).jpg" class="imgpfad" >
  <div class="ppp"></div>
</div>