javascript - 如何使用 jQuery 获取返回的 Ajax 数据中元素的第一个实例？

Question

我正在尝试在新站点中实现可访问的无限滚动方法，并且在尝试重置焦点时遇到问题。

如何获取 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();

},

他的回答指出我已经找到了最后一组项目。所以这有效。

Answer 1

这可能有效。注意 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();

        },