Tampermonkey脚本改造：点击.x-close切换显示下一个<li>元素

问题背景 #

编写Tampermonkey脚本时遇到两个核心问题：

• 原代码使用querySelector只能处理第一个<li>元素，无法适配DOM中多个<li>的场景
• 需要实现点击注入元素的关闭按钮时，触发原DOM对应元素的隐藏，同时自动切换显示下一个<li>的内容

完整修改代码 #

// ==UserScript==
// @name         多元素Alert切换显示脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  处理alertTable下多个li元素，点击关闭自动切换下一个
// @author       自定义名称
// @match        替换为你的目标页面URL
// @grant        none
// ==/UserScript==

$(document).ready(function() {
    // 获取所有目标li元素
    const alertItems = document.querySelectorAll('#alertTable li');
    if (alertItems.length === 0) return;

    // 跟踪当前显示的元素索引
    let currentIndex = 0;

    // 注入自定义样式到页面头部
    const style = document.createElement('style');
    style.textContent = `
        #scriptDiv img {
            width: 500px;
        }
        #scriptDiv li {
            color: #f8f8f8;
        }
    `;
    document.head.appendChild(style);

    // 创建脚本容器并插入到目标位置
    const scriptDiv = document.createElement('div');
    scriptDiv.id = 'scriptDiv';
    document.querySelector('.DOMheader').prepend(scriptDiv);

    // 渲染当前索引对应元素的函数
    function renderCurrentItem() {
        // 边界判断：无更多元素时提示
        if (currentIndex >= alertItems.length) {
            scriptDiv.innerHTML = '<p>没有更多元素了</p>';
            return;
        }

        // 深度克隆原li元素，避免修改原DOM结构
        const currentItemClone = alertItems[currentIndex].cloneNode(true);
        const closeBtn = currentItemClone.querySelector('.x-close');

        // 绑定关闭按钮点击事件
        closeBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            // 触发原DOM中对应元素的关闭按钮点击
            alertItems[currentIndex].querySelector('.x-close').click();
            // 索引自增，渲染下一个元素
            currentIndex++;
            renderCurrentItem();
        });

        // 更新容器内容
        scriptDiv.innerHTML = '';
        scriptDiv.appendChild(currentItemClone);
    }

    // 初始化渲染第一个元素
    renderCurrentItem();
});

核心修改点说明 #

• 批量获取元素：使用querySelectorAll('#alertTable li')获取所有目标<li>，替代原代码的单个元素获取
• 索引跟踪机制：通过currentIndex变量记录当前显示的元素位置，点击关闭后自增实现切换
• 元素克隆：用cloneNode(true)深度克隆原元素，避免直接操作原DOM节点引发的布局异常
• 事件绑定逻辑：为每个克隆元素的关闭按钮绑定事件，先触发原DOM对应按钮的隐藏操作，再切换到下一个元素
• 边界处理：当索引超出元素总数时，显示无更多内容的提示

内容的提问来源于stack exchange，提问作者user26839name