Question

我正在尝试使用jquery开发一个load-more函数。使用我当前的方法，我只在表格的最后一个标签页中显示的最后question-summay之后加载更多内容。我希望，当我点击我的加载更多按钮，在具有相应ID的question-summary的最后question-col之后加载我的内容。

我的JS功能：

$(document).ready(function () {
    $(".loadMore").on('click', function () {
        var tab = $(this).data('tab');
        var next_page = $(this).data('next-page');
        console.log(next_page);
        console.log(tab);
        $.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
            addNewQuestions($.parseJSON(data), tab);
        });
        $(this).data('next-page', parseInt(next_page) + 1);
    });

    siteStats();
});

function addNewQuestions(objects, tab) {

    $.each(objects, function (i, object) {
        console.log(tab);
        var lastItem = $(".question-summary:last");
        console.dir(lastItem);
        var newLine = lastItem.clone(true);

        var newObject = newLine.find('.question-info');

        updateTitleAndLink(newObject.find('.summary a'), object);
        updateCreationDate(newObject.find('.question-updated-at'), object);
        updateQuestionAnswers(newObject.find('.question-answers'), object);
        updateAnswerCount(newObject.find('.answers-count'), object);
        updateViewsCount(newObject.find('.views-count'), object);
        updateVotesCount(newObject.find('.votes-count'), object);
        updateSolvedStatus(newObject.find('.status'), object)

        lastItem.after(newLine);
    });
}

我认为问题出在var lastItem = $("question-summary:last");行。我尝试了很多不同的解决方案，例如.question-col#tab.question-summary来选择带有id选项卡的正确元素但是没有用。

<div id="tabs" class="tab-content">
    <ul>
        <li><a href="#recent_questions">Recent Questions</a></li>
        <li><a href="#unanswered_questions">Unanswered Questions</a></li>
        <li><a href="#top">Top Scored Questions</a></li>
    </ul>


    <div id="recent_questions" class="question-col">
        <div class="question-summary narrow">

            <div class="question-info col-md-12">

                <div class="votes">
                    <div class="votes-count">
                <span title="{$question['votes_count']} votes">
                    {if $question['votes_count']}
                        {$question['votes_count']}
                    {else}
                        0
                    {/if}
                </span>
                    </div>
                    <div>votes</div>
                </div>

                <div {if $question['solved_date']}
                    class="status answered-accepted"
                {else}
                    class="status answer-selected"
                {/if}
                        title="one of the answers was accepted as the correct answer">
                    <div class="answers-count">
                        <span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
                    <div>answer</div>
                </div>
                <div class="views">
                    <div class="views-count">
                        <span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
                    <div>views</div>
                </div>

                <div class="summary question-title">
                    <h3>
                        <a href="{questionUrl($question['publicationid'])}"
                           data-base-question-url = "{questionUrl('')}"
                           style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
                            {$question['title']}
                        </a>
                    </h3>
                </div>


                <div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
            <span>
                <i class = "glyphicon glyphicon-time"></i>
                <span class="question-updated-at">{$question['creation_date']}</span>
            </span>
                    <span>
                <i class = "glyphicon glyphicon-comment"></i>
                <span class="question-answers">{$question['answers_count']}</span>
            </span>
                </div>
            </div>

        </div>

        <div class = "loadMore"
             data-next-page = "1"
             data-url = "{url('controller/api/questions/load_more_questions')}"
             data-tab = "recent_questions">
            <a style="color: #f9f9f9">
                Load More...
            </a>
        </div>
    </div>

    <div id="unanswered_questions" class="question-col">
        {foreach $unanswered_questions as $question}
            <div class="question-summary narrow">

                <div class="question-info col-md-12">

                    <div class="votes">
                        <div class="votes-count">
                <span title="{$question['votes_count']} votes">
                    {if $question['votes_count']}
                        {$question['votes_count']}
                    {else}
                        0
                    {/if}
                    </span>
                        </div>
                        <div>votes</div>
                    </div>

                    <div {if $question['solved_date']}
                        class="status answered-accepted"
                    {else}
                        class="status answer-selected"
                    {/if}
                            title="one of the answers was accepted as the correct answer">
                        <div class="answers-count">
                            <span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
                        <div>answer</div>
                    </div>
                    <div class="views">
                        <div class="views-count">
                            <span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
                        <div>views</div>
                    </div>

                    <div class="summary question-title">
                        <h3>
                            <a href="{questionUrl($question['publicationid'])}"
                               data-base-question-url = "{questionUrl('')}"
                               style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
                                {$question['title']}
                            </a>
                        </h3>
                    </div>


                    <div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
            <span>
                <i class = "glyphicon glyphicon-time"></i>
                <span class="question-updated-at">{$question['creation_date']}</span>
            </span>
                        <span>
                <i class = "glyphicon glyphicon-comment"></i>
                <span class="question-answers">{$question['answers_count']}</span>
            </span>
                    </div>
                </div>

            </div>
        {/foreach}

        <div class = "loadMore"
             data-next-page = "1"
             data-url = "{url('controller/api/questions/load_more_questions')}"
             data-tab = "unanswered_questions">
            <a style="color: #f9f9f9">
                Load More...
            </a>
        </div>
    </div>
    <div id="top" class="question-col">
        {foreach $top_scored_questions as $question}
            <div class="question-summary narrow">

                <div class="question-info col-md-12">

                    <div class="votes">
                        <div class="votes-count">
                <span title="{$question['votes_count']} votes">
                    {if $question['votes_count']}
                        {$question['votes_count']}
                    {else}
                        0
                    {/if}
                    </span>
                        </div>
                        <div>votes</div>
                    </div>

                    <div {if $question['solved_date']}
                        class="status answered-accepted"
                    {else}
                        class="status answer-selected"
                    {/if}
                            title="one of the answers was accepted as the correct answer">
                        <div class="answers-count">
                            <span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
                        <div>answer</div>
                    </div>
                    <div class="views">
                        <div class="views-count">
                            <span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
                        <div>views</div>
                    </div>

                    <div class="summary question-title">
                        <h3>
                            <a href="{questionUrl($question['publicationid'])}"
                               data-base-question-url = "{questionUrl('')}"
                               style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
                                {$question['title']}
                            </a>
                        </h3>
                    </div>


                    <div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
            <span>
                <i class = "glyphicon glyphicon-time"></i>
                <span class="question-updated-at">{$question['creation_date']}</span>
            </span>
                        <span>
                <i class = "glyphicon glyphicon-comment"></i>
                <span class="question-answers">{$question['answers_count']}</span>
            </span>
                    </div>
                </div>

            </div>
        {/foreach}

        <div class = "loadMore"
             data-next-page = "1"
             data-url = "{url('controller/api/questions/load_more_questions')}"
             data-tab = "top_scored_questions">
            <a style="color: #f9f9f9">
                Load More...
            </a>
        </div>

    </div>
</div>

知道我做错了吗？

亲切的问候

Answer 1

你忘记了班级（点）选择器：

var lastItem = $("question-summary:last");

试试这个：

var numQ = $('.question-summary').length;
var lastItem = $('.question-summary').eq(numQ-1);

Answer 2

要选择最后一个，您可以将.last()与类选择器一起使用，如

alert($('.myList').last().html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="myList">One</li>
  <li class="myList">Two</li>
  <li class="myList">Three</li>
</ul>

使用id和类

2 个答案: