我有一个Jquery函数，它查找某些<div>元素并将信息插入其中。我有两个相同的容器，每个容器内有10个空白<div>元素。当我单击以运行我的函数时，它会将信息正确地加载到第一组空白<div>元素中。当我单击再次在第二个容器上运行该功能时，它会再次将内容重新加载到第一个容器中。
我一直在研究Jquery中的上下文，我相信可能是我的解决方案。我认为它的工作方式是我会告诉我的函数“只在这个特定的容器中运行”，这样它才能在两个容器中成功运行。
直播示例： 1.单击“图像”。 Reddit将正确加载。 2.单击“BuildaPCSales。将信息重新载入图像。
https://brotherhoodgaming.net/reddit.php
脚本
function loadRedditData(redditSearch) {
$.getJSON(
'https://www.reddit.com/r/' + encodeURIComponent(redditSearch) + '.json',
function foo(data) {
$.each(
// iterate over 10 children, starting at the 0th index
data.data.children.slice(0, 11),
function (i, post) {
//Load reddit title in correct div//
$('#news' + i + ' .redditTitle').append(
$('<a>')
.attr('href', 'https://m.reddit.com' + post.data.permalink)
.text(post.data.title)
);
//Load reddit Score (net UP - DOWN)//
$('#news' + i + ' .redditScore').prepend(
$('<p>')
.attr('class', 'redditUpvoteScore')
.text(post.data.score)
);
//Load reddit post-text in HTML format//
$('#news' + i + ' .redditPost').append(
$('<p>')
.text(post.data.selftext_html)
);
//Load sub-reddit name in HTML format//
/*$('#news' + i + ' .subRedditName').append(
$('<p>')
.attr('class', 'subRedditFormat')
.text('r/' + post.data.subreddit)
);*/
//Load post thumbnail URL into an <a> tag wrapping the image//
$('#news' + i + ' .redditThumbnail').append(
$('<a>')
.attr('href', post.data.url)
.attr('class', 'thumbURL')
);
//Load actual thumbnail into the <a> wrapper tag with the thumbURL class//
$('#news' + i + ' .thumbURL').append(
$('<img>')
.attr('src', post.data.thumbnail)
.attr('class', "image news hide floatleft")
);
//Load reddit Username and URL into container DIV//
$('#news' + i + ' .userNameContainer').append(
$('<a>')
.attr('class', 'redditUserName')
.attr('href', 'https://m.reddit.com/user/' + post.data.author)
.text(post.data.author)
);
// Convert post creation time to local time//
var utcSeconds = post.data.created_utc;
var d = new Date(0);
// The 0 is the key, which sets the date to the epoch
d.setUTCSeconds(utcSeconds);
//Use Moment.js to calculate relative date and append to DIV//
$('#news' + i + ' .redditDate').append(
moment(d).fromNow()
);
//Decodes HTML into correct format by replacing unescaped characters//
$('.redditPost').each(function () {
var $this = $(this);
var t = $this.text();
$this.html(t.replace('<', '<').replace('>', '>'));
$this.html(t.replace('null', '').replace('null', ''));
});
//Checks for "self" tagged images and replaces with placeholder image//
function changeSourceAll() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('self') !== -1) {
images[i].src = images[i].src.replace("self", "css/images/default.jpg");
}
}
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('default') !== -1) {
images[i].src = images[i].src.replace("self", "css/images/default.jpg");
}
}
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('https://www.brotherhoodgaming.net/default') !== -1) {
images[i].src = images[i].src.replace("https://www.brotherhoodgaming.net/default", "css/images/default.jpg");
}
}
}
changeSourceAll();
}
)
}
).error(function () {
alert("We are unable to locate your desired subreddit OR you have requested a subreddit that does not exist.");
})
}
HTML结构
<div class="redditContainer">
<div class="redditHeader">
<p class="subRedditTitle">Images</p>
<i class="material-icons redditHeaderCollapse">
arrow_drop_down
</i>
</div>
<div class="cardbox news nopad" style="display:none;">
// There are 9 more identical copies of these.
// Removed to save space
<div class="listrow news nomargin">
<div class="newsContainer">
<div class="redditThumbnail clearfix floatleft"></div>
<div class="articleHeader read clearfix">
<div class="actionmenuHeader">
<div class="userNameContainer"></div>
<div class="redditFlair"></div>
<div class="subRedditName"></div>
<div class="redditDate"></div>
<div class="redditScore">
<i class="redditUpvote material-icons">
keyboard_arrow_up
</i>
</div>
</div>
<p class="redditTitle clearfix mediaTitle news"></p>
<div class="redditPost mediumtext"></div>
</div>
</div>
</div>
</div>
</div>
有关如何将其正确加载到每个容器中的任何建议吗？我在过去的5-6小时内多次重新安排了我的功能，而且我已经无法解决我的问题了。
答案 0 :(得分：1)
在您的实例中，有一些ID为newsx的div，其中x为1-20。由于使用$.each，索引i将始终从0开始。因此，每次只更新前10个newsx div。
您最好传递像：
这样的元素$('.redditHeader').one("click", function() {
var redditSearch = $(this).children('.subRedditTitle').text();
loadRedditData(redditSearch, this);
});
然后通过添加参数
在loadRedditData函数中捕获它function loadRedditData(redditSearch, element){
//code
}
然后根据loadRedditData中的元素变量，您可以使用：
var newsList = $(element).next().children();
这将包含当前标头下所有newsx div的列表（如果DOM已更改，这可能不正确）。目前，DOM返回所选标头下的所有newsx div。然后，您可以使用newsList[i]上的数组索引来访问每个newsx div。例如：
$(newsList[i]).find('.redditScore');
此外，您当前正在循环浏览11条记录并使用除第一条记录之外的所有记录。按照我上面展示的方式进行操作只会使用前10个记录并跳过最后一个记录。