如何从动态生成的分页列表中选中分页页码？

咱们来一步步解决你的分页页码选中问题哈！先看看你现有代码里的几个小问题：

• 你把点击事件绑在了整个.pagination容器上，用$(this).index()拿到的是这个ul元素在父元素里的位置，根本不是你点击的页码项的索引，这肯定拿不到正确的页码~
• document.getElementsByClassName('.block2-sid')这里有语法错误，getElementsByClassName的参数不需要加.，直接写类名就行；而且既然用了jQuery，没必要混用原生DOM方法，反而更麻烦。
• 点击a标签的时候没阻止默认跳转，页面会跳到锚点#，体验很差。

下面是修正后的完整方案：

保持你的动态HTML结构（附小优化） #

<ul class="pagination">
    <c:forEach items="${pegination}" var="vi">
        <!-- 注意：HTML里id必须唯一，这里重复的id="getit"要改掉，比如改成动态唯一id -->
        <li><a href="#" id="page-${vi.num}" class="block2-sid">${vi.num}</a></li>
    </c:forEach>
</ul>

小提示：去掉重复的id="getit"或者改成动态生成的唯一id，不然后续操作DOM可能会出问题哦~

修正后的JavaScript代码 #

// 用事件委托处理动态生成的分页项，确保点击有效
$('.pagination').on('click', 'a.block2-sid', function(e) {
    // 阻止a标签默认跳转行为，避免页面乱跳
    e.preventDefault();
    
    // 直接获取当前点击的页码文本，简单又准确
    var selectedPage = $(this).text().trim();
    
    alert('选中的页码是：' + selectedPage);
    
    // 可选：给选中的页码加高亮样式，让用户一眼看到选中状态
    $('.pagination li').removeClass('active');
    $(this).parent('li').addClass('active');
});

代码说明： #

• 事件委托：因为你的分页是动态生成的，直接绑定点击事件到a标签上可能失效，用.on('click', 'a.block2-sid', ...)把事件绑在父容器上，不管后续生成多少分页项，点击都能触发。
• e.preventDefault()：阻止a标签默认的跳转行为，解决点击后页面跳到顶部的问题。
• $(this).text().trim()：直接获取当前点击的a标签里的页码，比通过索引找元素靠谱多了，还简洁。
• 高亮样式：最后那段代码是给选中的页码li加上active类，你需要自己定义这个类的CSS，比如：

.pagination li.active a {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

这样选中的页码就会有蓝色背景白色文字，很直观~

内容的提问来源于stack exchange，提问作者Mohd Saif Farooqui