【问题标题】:Loop through each element with class and append its text JQUERY使用类循环遍历每个元素并附加其文本 JQUERY
【发布时间】:2018-03-03 04:45:28
【问题描述】:

我需要循环使用类.spr-review-content 的几个<div> 元素并获取每个<span class="image_src"> 的文本。然后将该文本用作该div 的附加<img>src。我几乎让它工作了,但是代码抓取了每个跨度的所有文本并将其用作每个图像的图像源,而不仅仅是那个跨度的文本。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Display Image Test</title>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>
<body>

    <div class="spr-review" id="spr-review-49046513">
        <div class="spr-review-header">
        <span class="spr-starratings spr-review-header-starratings">
            <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
            <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
            <i class="spr-icon spr-icon-star"></i>
        </span>
        <h3 class="spr-review-header-title">Teething Toy</h3>
        <span class="spr-review-header-byline"><strong>Jessi</strong> on <strong>Oct 06, 2017</strong></span>
    </div>

    <div class="spr-review-content">
        <p class="spr-review-content-body">Beautifully made item, and the sweetest photo prop. Was a 'must have' piece for my babe. Thanks!</p>
    </div>
    <span class="image_src">https://img0.etsystatic.com/130/0/8943009/iap_300x300.1065344898_2arw8sir.jpg</span>
    <div class="spr-review-footer">
        <a href="#" class="spr-review-reportreview" onclick="SPR.reportReview(49046513);return false" id="report_49046513" data-msg="This review has been reported">Report as Inappropriate</a>
  </div>
  </div>

  <div class="spr-review" id="spr-review-49046513">
        <div class="spr-review-header">
        <span class="spr-starratings spr-review-header-starratings">
            <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
            <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
            <i class="spr-icon spr-icon-star"></i>
        </span>
        <h3 class="spr-review-header-title">Teething Toy</h3>
        <span class="spr-review-header-byline"><strong>Jessi</strong> on <strong>Oct 06, 2017</strong></span>
    </div>

    <div class="spr-review-content">
        <p class="spr-review-content-body">Beautifully made item, and the sweetest photo prop. Was a 'must have' piece for my babe. Thanks!</p>
    </div>
    <span class="image_src">https://img0.etsystatic.com/130/0/8943009/iap_300x300.1065344898_2arw8sir.jpg</span>
    <div class="spr-review-footer">
        <a href="#" class="spr-review-reportreview" onclick="SPR.reportReview(49046513);return false" id="report_49046513" data-msg="This review has been reported">Report as Inappropriate</a>
  </div>
  </div>


  <script>

        $('.spr-review-content').each(function(){

        var img_src = $('.image_src').text();

        $('<img />', {'class' : 'review_img', 'src' : img_src , appendTo : this});

        });

    </script>

【问题讨论】:

    标签: javascript jquery image loops foreach


    【解决方案1】:

    你需要改成这个

    var img_src = $(this).next('.image_src').text();
    

    $('.spr-review-content').each(function() {
    
      var img_src = $(this).next('.image_src').text();
      $('<img />', {
        'class': 'review_img',
        'src': img_src,
        appendTo: this
      });
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="spr-review" id="spr-review-49046513">
      <div class="spr-review-header">
        <span class="spr-starratings spr-review-header-starratings">
                <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
                <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
                <i class="spr-icon spr-icon-star"></i>
            </span>
        <h3 class="spr-review-header-title">Teething Toy</h3>
        <span class="spr-review-header-byline"><strong>Jessi</strong> on <strong>Oct 06, 2017</strong></span>
      </div>
    
      <div class="spr-review-content">
        <p class="spr-review-content-body">Beautifully made item, and the sweetest photo prop. Was a 'must have' piece for my babe. Thanks!</p>
      </div>
      <span class="image_src">https://img0.etsystatic.com/130/0/8943009/iap_300x300.1065344898_2arw8sir.jpg</span>
      <div class="spr-review-footer">
        <a href="#" class="spr-review-reportreview" onclick="SPR.reportReview(49046513);return false" id="report_49046513" data-msg="This review has been reported">Report as Inappropriate</a>
      </div>
    </div>
    
    <div class="spr-review" id="spr-review-49046513">
      <div class="spr-review-header">
        <span class="spr-starratings spr-review-header-starratings">
                <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
                <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i>
                <i class="spr-icon spr-icon-star"></i>
            </span>
        <h3 class="spr-review-header-title">Teething Toy</h3>
        <span class="spr-review-header-byline"><strong>Jessi</strong> on <strong>Oct 06, 2017</strong></span>
      </div>
    
      <div class="spr-review-content">
        <p class="spr-review-content-body">Beautifully made item, and the sweetest photo prop. Was a 'must have' piece for my babe. Thanks!</p>
      </div>
      <span class="image_src">https://img0.etsystatic.com/130/0/8943009/iap_300x300.1065344898_2arw8sir.jpg</span>
      <div class="spr-review-footer">
        <a href="#" class="spr-review-reportreview" onclick="SPR.reportReview(49046513);return false" id="report_49046513" data-msg="This review has been reported">Report as Inappropriate</a>
      </div>
    </div>

    【讨论】:

    • 谢谢!我知道这是一个微不足道的错误。我之前在变量中尝试过 $(this) 但忘记了 .next。感谢您的快速回复。
    猜你喜欢
    • 2017-01-24
    • 2018-06-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-22
    • 2011-07-14
    相关资源
    最近更新 更多