javascript - Jquery 在第 n 个项目之后显示隐藏列表项目，不适用于 ajax 加载的内容

Question

我想在 ul li 项超过 3 时隐藏 ul li 项，并显示“查看更多”按钮以展开并显示更多 li 项。我正在使用以下 jquery 代码，该代码可以很好地处理静态内容，但在使用 ajax 动态加载内容时则无法正常工作。

$(document).ready(function () {

    $('ul.categorylist').each(function () {  
  $(this).find('li').filter(':gt(2)').filter("li[class!='More']").slideToggle(500);
        if (($(this).children().size()) > 4) {
            $(this).append('<li class="More"><a href="Javascript:void(0);">View More...</a></li>').find('li:last').click(function () {            $(this).parent().children().filter(':gt(3)').filter("li[class!='More']").slideToggle(800);
                if ($(this)[0].innerHTML.indexOf("View More...") == -1)
                    $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View Less...", "View More...");
                else
                    $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View More...", "View Less...");
            });
        }
    });
});

这是我正在使用的 angularjs Controller

  .controller('SubCategoriesCtrl', ['$scope', '$routeParams', '$filter', '$rootScope', '$http', '$location', 'SubCategories', function ($scope, $routeParams, $filter, $rootScope, $http, $location, SubCategories) {

        var cat1 = "";
        var cat2 = "";
        var url = window.location.pathname.split('/');
        for(var i=0; i<url.length; i++) {
            if(url[i].length > 0)
            {
                if(i==1)
                    cat1 = url[i];
                if(i==2)
                    cat2 = url[i];
            }
        }
        if(cat1 != "aboutus" && cat1 != "contactus" && cat1 != "termsofuse" && cat1 != "privacypolicy" && cat1 != "sitemap") {
            SubCategories.customGETLIST("", {"query": cat1}).then(function(subcategories) {
                fixLiElements();
                $scope.subcategories = subcategories;

                //console.log($scope.subcategories);
            }, function(error) {
                console.log("we had an error here while loading sub categories.." + error);
            });
        }

  }])

这就是我在页面中调用它的方式

    <div ng-repeat="c in subcategories | filter:{ categorylevel: 1 }" class="category-list-container">
        <ul ng-repeat="cat in subcategories | filter:{ categorylevel: 2 } | orderBy:'name'" class="catlist">
            <h3 class="CatPCat2Name">[[cat.name]]</h3>

                <li ng-repeat="catt in subcategories | filter:{ parentcategoryid: cat.id} | filter:{ categorylevel: 3 } | orderBy:'name'">
                    <a ng-href="/[[c.slug]]/[[cat.slug]]/[[catt.slug]]">[[catt.name]]</a>
                </li>
                <li ng-repeat="catt in subcategories | filter:{ parentcategoryid: cat.id} | filter:{ categorylevel: 4 } | orderBy:'name'">
                    <a ng-href="/[[c.slug]]/[[cat.slug]]/[[catt.slug]]">[[catt.name]]</a>
                </li>


        </ul>
    </div>

我尝试过使用 ajaxStop() 并在 ajax 成功时调用它，但失败了。

请帮助我哪里做错了，我应该在哪里使用这个jquery脚本？

Answer 1

当使用 jQuery 动态加载内容时，它们不会绑定(bind)到 ul li 项。因此，您的代码不适用于使用 jQuery 加载的内容。为此，您需要使用 jQuery 的 ajaxStop() 事件，以防使用 ajax 加载内容。

例如

function yourfunction(){
    $('ul.categorylist').each(function () {  
          $(this).find('li').filter(':gt(2)').filter("li[class!='More']").slideToggle(500);
            if (($(this).children().size()) > 4) {
                $(this).append('<li class="More"><a href="Javascript:void(0);">View More...</a></li>').find('li:last').click(function () {            $(this).parent().children().filter(':gt(3)').filter("li[class!='More']").slideToggle(800);
                    if ($(this)[0].innerHTML.indexOf("View More...") == -1)
                        $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View Less...", "View More...");
                    else
                        $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View More...", "View Less...");
                });
            }
        });
    }
}

//call ready event to bind for the content when is loaded
$(document).ready(function() {yourfunction(); });

//call ajaxStop event to bind for the content when ajax call is made
$(document).ajaxStop(function() {yourfunction(); });