当目标类的多个实例位于同一页面上时,如何使用jQuery计算单个块中的子节点数

这些块被编码以返回所有结果.但是为了防止列表过长,我默认列表只显示3个项目,并且在“显示更多”按钮中工作,点击时触发手风琴效果以显示剩余项目(如果有).

我遇到的问题是显示更多按钮正在显示,即使块没有超过3项.似乎size()计算两个块的总子节点,而不是单独的每个块.

当然,我可以针对2个独特的选择器并使其正常工作.但是我希望这个脚本可以重复使用,而不必每次我需要另一个手风琴块时总是添加一个新的选择器.

我现在拥有它的方式,无论何时你想要将一个手风琴效果应用于一个块,你只需要在包含HTML列表的任何块上向外包装器添加一个“accordion”类.

这是我的代码.

(function($) {
    $(document).ready(function() { 
        /**
         * Define variables
         */
        var parentSELEctor = $('.block-views .accordion ul'),controlsHTML = $('<div class="show-more"><button>Show More</button></div>'),count = $(parentSELEctor).children().size();

        /**
         * Wrap all items we want to show/hide except for the first 3
         */
        $(parentSELEctor).children().not(':nth-child(1),:nth-child(2),:nth-child(3)').wrapAll('<div class="slide-content" />');

        /**
         * Hide content that should be hidden by default
         */
        $('.slide-content').hide();

    /**
     * Insert open/close button if there are more than three items in list
     */
    if (count > 3) {
    $(controlsHTML).insertAfter(parentSELEctor);
    }

        /**
         * Build the expanding content container and attach it to a click event
         */
        $(".show-more button").toggle(
            function () {
                $(this).toggleClass('collapse');
                $(this).text("Show Less");
                $(this).parents('.item-list').find('.slide-content').slideDown();
            },function () {
                $(this).toggleClass('collapse');
                $(this).text("Show More");
                $(this).parents('.item-list').find('.slide-content').slideUp();
            }
        );
    });
}(jQuery));