我正在使用一些jQuery从第三方网站检索和解析一些JSON,因此我可以使用该网站的图像来填充图库。
请参阅下面的详细信息,并转载于this JSFiddle:
$(document).ready(function() {
function populateImages(path) {
$('.crush').each(function() {
$(this).html('<img src="' + path + '/>');
});
}
$.ajax({
url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
dataType: "jsonp",
type: "get",
success: function(data) {
var regex = /"/g;
var i = 0;
for (i = 0; i < 20; i++) {
var content = data.posts[i].content_display;
var part1 = content.split('src="');
var part2 = part1[1].split(regex);
var imgPath = part2[0];
console.log(imgPath);
populateImages(imgPath);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Result:</h1>
<div id="result">
<div class="pure-g">
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
<div class="crush"></div>
</div>
</div>
我知道检索JSON查询的部分正在工作,因为它正在输出我想要在控制台中抓取的图像路径。但是,最后一部分是使用jQuery .each函数添加标记并用我用AJAX检索的路径填充它,但它不起作用。
不确定我做错了什么。
请注意,虽然第二部分是自己的函数populateImages
,但我尝试将该代码嵌入循环部分,但仍具有相同的效果。
非常感谢任何人都可以提供帮助。
答案 0 :(得分:2)
你不应该使用each
,这只意味着你会在第一个URL的每个元素中放置一个图像,然后将所有元素替换为第二个URL的图像,依此类推。您可以使populateImages
函数获取要放置图像的索引。使用eq
方法获取特定元素:
function populateImages(index, path) {
$('.crush').eq(index).html('<img src="' + path + '"/>');
}
使用循环计数器作为索引调用该函数:
populateImages(i, imgPath);
答案 1 :(得分:1)
每次循环进行迭代时,您都会使用相同的图像填充每个.crush
。这应该有效:
$(document).ready(function(){
var crushes = $('.crush');
$.ajax({
url:'http://tubecrush.net/wp_api/v1/posts?callback=show',
dataType:"jsonp",
type:"get",
success:function(data){
var regex = /"/g;
var i = 0, l = crushes.length;
for(i=0;i<l;i++) {
var content = data.posts[i].content_display;
var part1 = content.split('src="');
var part2 = part1[1].split(regex);
var imgPath = part2[0];
console.log(imgPath);
crushes.eq(i).html('<img src="' + imgPath + '"/>');
}
}
});
});
答案 2 :(得分:1)
您可以使用jQuery eq()
轻松缩小选择范围。
http://jsfiddle.net/BramVanroy/rzg64bvh/6/
$(document).ready(function () {
$.ajax({
url: 'http://tubecrush.net/wp_api/v1/posts?callback=show',
dataType: "jsonp",
type: "get",
success: function (data) {
var regex = /"/g;
var i = 0;
for (i = 0; i < 20; i++) {
var content = data.posts[i].content_display;
var part1 = content.split('src="');
var part2 = part1[1].split(regex);
var imgPath = part2[0];
console.log(imgPath);
$('.crush').eq(i).html('<img src="' + imgPath + '">');
}
}
});
});