基于索引值为DOM集合添加类：分页排序后无法显示指定范围项

你的核心问题出在排序时机错误、forEach中的this指向问题以及类名不统一这几个点上，下面一步步帮你修正：

1. 核心问题拆解 #

• this指向错误：在results.forEach的回调里，$(this)并没有指向当前遍历的resultsItem元素——普通函数在forEach中this默认是undefined，所以无法正确操作目标元素。
• 排序时机不对：你把tinysort放在了forEach的判断分支里，会导致多次重复排序；正确逻辑应该是先对整个列表完成排序，再根据分页范围控制显示/隐藏。
• 类名不匹配：隐藏元素时加的是hidden类，移除时却尝试移除hidden_apa，类名不一致导致无法正常显示元素。

2. 修正后的关键代码 #

排序点击事件修复 #

// Sort when Icon clicked
$('#filterBtn i').on('click', function () {
    var currentPgVal = parseInt(document.querySelector('.page-item.active a').textContent);
    // 建议把itemsPerPage设为全局变量，避免重复定义
    var rangeMax = currentPgVal * itemsPerPage - 1;
    var rangeMin = rangeMax - itemsPerPage + 1;
    var sortDirection = $('#filterBtn').find('i[class$=active]').data('sortdir');
    // 修正选择器：对应HTML里的select类名是searchFieldMenu
    var sortOption = $('.searchFieldMenu').find(':selected').val();

    // 切换排序图标显示状态
    $('i[class*=fa-sort-alpha]').toggleClass('hidden active');

    // 第一步：先对整个列表完成排序
    tinysort('.resultsItem', { 
        order: sortDirection, 
        selector: '.' + sortOption 
    });

    // 第二步：隐藏所有项
    $('.resultsItem').addClass('hidden');

    // 第三步：遍历排序后的列表，显示当前分页范围内的项
    var results = document.querySelectorAll('.resultsItem');
    results.forEach(function(val, i) {
        if(i >= rangeMin && i <= rangeMax) {
            // 用val操作当前元素，替代原来的$(this)
            $(val).removeClass('hidden');
        }
    });
});

listFilter函数修复 #

function listFilter() {
    window.scrollTo(0,0);
    var list = document.querySelectorAll('.resultsItem');
    var currentPgVal = parseInt(document.querySelector('.page-item.active a').textContent);
    var rangeMax = currentPgVal * itemsPerPage - 1;
    var rangeMin = rangeMax - itemsPerPage + 1;

    // 先统一隐藏所有项
    $('.resultsItem').addClass('hidden');

    // 显示当前分页范围的项
    list.forEach(function(val, i) {
        if(i >= rangeMin && i <= rangeMax) {
            $(val).removeClass('hidden');
        }
    });
}

3. 额外优化建议 #

• 将itemsPerPage设为全局变量，避免在多个函数中重复定义，降低维护成本。
• 分页生成函数createPagination里的HTML拼接可以用ES6模板字符串（`）替代传统字符串拼接，可读性更强。
• 保持选择器的一致性，避免出现原代码中$('.filterOptions')这类与HTML结构不匹配的选择器。

内容的提问来源于stack exchange，提问作者cpt-crunchy