使用类循环遍历每个元素并附加其文本JQUERY
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用类循环遍历每个元素并附加其文本JQUERY相关的知识,希望对你有一定的参考价值。
我需要使用类<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>
以上是关于使用类循环遍历每个元素并附加其文本JQUERY的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jQuery 遍历这个 DOM 并检索所需的文本?
jQuery$.each循环遍历详解,各种取值对比,$.each遍历数组对象Dom元素二维数组双层循坏类json数据等等