个人中心
gpt4 book ai didi

javascript - 使用类循环遍历每个元素并附加其文本 JQUERY

转载 作者：行者123 更新时间：2023-12-03 02:22:52 25 4
gpt4 key购买 nike

我需要循环几个<div>具有类 .spr-review-content 的元素并抓取每个 <span class="image_src"> 的文本。然后将该文本用作 src附加的<img>为此div 。我几乎可以正常工作，但代码会获取每个范围的所有文本，并将其用作每个图像的图像源，而不仅仅是该范围的文本。

代码: 

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

最佳答案

你需要改变这个

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>

关于javascript - 使用类循环遍历每个元素并附加其文本 JQUERY，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49080736/

25 4 0
文章推荐： javascript - 从 webpack 打包后如何查看开发服务器的内容？
文章推荐： javascript - 如何使用后向和前向零长度断言提取括号内的字符串？
文章推荐： javascript - DOM 加载后如果 body hasClass
文章推荐： javascript - (rails) moment 对象显示为正在突变，但 .hours() 是正确的
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com