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

时间:2016-10-12 22:19:11

标签: jquery html class append each

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

我想在每个 ppp 类的每个强&gt; 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" width="250px">
</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" width="250px">

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

1 个答案:

答案 0 :(得分:0)

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

使用parseInt()时,您无需致电.data()。如果数据可以解析为JSON,jQuery将自动执行此操作。

&#13;
&#13;
$('.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>");

  }
});
&#13;
<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" width="250px">
</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" width="250px">

</div>
<div class="testimonial" data-index="3">
  <span class="title">Testimonial 3</span>
  <img src="upload/IMG_20160721_143235(3).jpg" class="imgpfad" width="250px">
  <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" width="250px">
  <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" width="250px">
  <div class="ppp"></div>
</div>
&#13;
&#13;
&#13;