我正在尝试在新站点中实现可访问的无限滚动方法,并且在尝试重置焦点时遇到问题。
如何获取 ajax 调用返回的数据中的第一个链接实例?
这是我正在使用的 jQuery:
// infinite scrolling on blog page
// use: <button id="scroller" class="btn btn-primary load-more" data-parents="10,22" data-offset="0" data-posts="5">Show More Articles</button>
$('.load-more').click(function(e) {
var $this = $(this);
var offset = $this.data('offset');
var index = $this.data('index');
var posts = $this.data('posts');
var parents = $this.data('parents');
var myProperties = {
snippet: 'infiniteScroll',
limit: posts,
index: index,
offset: offset,
parents: parents,
depth: 10,
sortby: 'publishedon',
showHidden: 1,
debug: 1,
tpl: 'infiniteBlogPageTpl',
hideContainers: 1
};
//console.log('props = ' + JSON.stringify(myProperties));
$.ajax({
type: "POST",
url: "/ajax.processor",
data: myProperties,
dataType: "json",
success: function(response) {
var newposts = response.posts;
var $div = $("div#posts");
$div.append(newposts);
$div.find(".post-group:last").fadeIn();
$('body').stop().animate({scrollTop:$div.prop("scrollHeight") + $div.height()},1000);
if(response.lastpost){
console.log('nodata');
$this.attr('disabled', 'disabled');
$this.html('no more posts');
$('.scrollToTop').show();
}
$this.data('offset', (offset + posts));
$(document).foundation('equalizer', 'reflow');
$('#lastid').focus(); // need to set this to the first link of the first returned item
},
error: function(response){
console.log('error response' + response);
},
}).fail(function(jqXHR,textStatus,errorThrown) {
console.log('error response' + errorThrown);
}); // ajax
}); // load more
从 ajax 调用返回的数据如下所示:
<!-- first item -->
<div class="row infinite-item">
<div class="small-2 columns">
<a href="[[~[[+id]]]]" class="circular-image"> [[+tv.resource-thumbnail]] </a>
</div>
<div class="small-10 columns">
<a href="[[~[[+id]]]]" id="[[+idx]]" ><h3>[[+pagetitle]]</h3></a>
<div class="date"></div>
<div class="introtext"><p></p></div>
<div class="readmore"><a href="[[~[[+id]]]]" class="readmore">Read More</a></div>
</div>
</div>
<!-- second item -->
<div class="row infinite-item">
<div class="small-2 columns">
<a href="[[~[[+id]]]]" class="circular-image"> [[+tv.resource-thumbnail]] </a>
</div>
<div class="small-10 columns">
<a href="[[~[[+id]]]]" id="[[+idx]]" ><h3>[[+pagetitle]]</h3></a>
<div class="date"></div>
<div class="introtext"><p></p></div>
<div class="readmore"><a href="[[~[[+id]]]]" class="readmore">Read More</a></div>
</div>
</div>
<!-- third item -->
<div class="row infinite-item">
<div class="small-2 columns">
<a href="[[~[[+id]]]]" class="circular-image"> [[+tv.resource-thumbnail]] </a>
</div>
<div class="small-10 columns">
<a href="[[~[[+id]]]]" id="[[+idx]]" ><h3>[[+pagetitle]]</h3></a>
<div class="date"></div>
<div class="introtext"><p></p></div>
<div class="readmore"><a href="[[~[[+id]]]]" class="readmore">Read More</a></div>
</div>
</div>
<!-- etc -->
我需要做的是将焦点重置到第一项中的第一个链接。
如何使用 jQuery 来实现这一点?
更新
根据 p[ablito 的回复,我将成功更新为:
success: function(response) {
var newposts = response.posts;
var $div = $("div#posts");
$div.append(newposts);
var lastgroup = $div.find(".post-group:last");
lastgroup.fadeIn();
$('body').stop().animate({scrollTop:$div.prop("scrollHeight") + $div.height()},1000);
if(response.lastpost){
console.log('nodata');
$this.attr('disabled', 'disabled');
$this.html('no more posts');
$('.scrollToTop').show();
}
$this.data('offset', (offset + posts));
$(document).foundation('equalizer', 'reflow');
lastgroup.find('div.row.infinite-item div:first a').focus();
},
他的回答指出我已经找到了最后一组项目。所以这有效。
最佳答案
这可能有效。注意 lastItem
变量
success: function(response) {
var lastItem = $('div.row.infinite-item a').last();
var newposts = response.posts;
var $div = $("div#posts");
$div.append(newposts);
$div.find(".post-group:last").fadeIn();
$('body').stop().animate({scrollTop:$div.prop("scrollHeight") + $div.height()},1000);
if(response.lastpost){
console.log('nodata');
$this.attr('disabled', 'disabled');
$this.html('no more posts');
$('.scrollToTop').show();
}
$this.data('offset', (offset + posts));
$(document).foundation('equalizer', 'reflow');
lastItem.next('div.row.infinite-item').find('a').first().focus();
},
关于javascript - 如何使用 jQuery 获取返回的 Ajax 数据中元素的第一个实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32699764/