能否通过jQuery依据HTML注释修改对应页面元素？

需求场景HTML代码 #

<div id="container">
    <!-- Regular Text -->
    <p>Lorem ipsum...</p>
    <button class="Download"></button>

    <!-- Danger Text -->
    <p>Lorem ipsum...</p>
    <button class="Download"></button>
</div>

用户计划实现思路 #

1. 通过关键词匹配HTML注释，示例代码：

$('.wp-block-buttons').each(function() {
    console.log($(this).parent().html().indexOf('Regular') >= 0);
});

2. 匹配到指定关键词后，修改注释后续的<p>元素样式，示例代码：

$("p").css("color", "green");

请问该实现思路是否可行？

回答 #

这个思路可行，但你的示例代码存在几个需要调整的细节，不然容易出现误匹配或操作范围过大的问题：

• 选择器不匹配：你示例里用的.wp-block-buttons和需求里的#container结构完全不对应，得换成和目标结构匹配的选择器。
• 全局修改<p>风险大：直接用$("p").css()会修改页面所有<p>元素，而不是注释后续的目标元素。
• 用父元素HTML匹配关键词易误判：如果页面其他文本里也有"Regular"关键词，会触发错误的样式修改。

更精准的实现方式是直接定位到注释节点，再找到它后续的目标<p>元素：

// 遍历container内的所有节点
$('#container').contents().each(function() {
    // 匹配包含"Regular"的注释节点
    if (this.nodeType === 8 && this.textContent.includes('Regular')) {
        // 跳过空白/文本节点，找到下一个实际元素节点
        let nextElement = this.nextSibling;
        while (nextElement && nextElement.nodeType === 3) {
            nextElement = nextElement.nextSibling;
        }
        // 如果找到的是<p>元素，修改样式
        if (nextElement?.tagName === 'P') {
            $(nextElement).css('color', 'green');
        }
    }
    // 匹配包含"Danger"的注释节点，同理修改样式
    if (this.nodeType === 8 && this.textContent.includes('Danger')) {
        let nextElement = this.nextSibling;
        while (nextElement && nextElement.nodeType === 3) {
            nextElement = nextElement.nextSibling;
        }
        if (nextElement?.tagName === 'P') {
            $(nextElement).css('color', 'red');
        }
    }
});

这样既能精准匹配目标注释，也只会修改对应注释后续的<p>元素，不会影响页面其他元素。

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