jQuery 注释/取消注释 答案

【问题标题】：jQuery comment/uncomment jQuery 注释/取消注释 
【发布时间】：2013-03-11 07:36:56
【问题描述】：

我正在寻找一种使用 jQuery 将元素包装到评论中的方法，例如：

<!--
<div class="my_element"></div>
-->

也是一种移除 cmets 的方法。

这可能吗？

【问题讨论】：

了解您的用例是什么会很有用。我想不出在很多情况下这是正确的做法，而不是隐藏元素，或者将其从 DOM 中删除并稍后再添加。
我从来没有见过这样的东西 :) 考虑隐藏它，结果是一样的。从屏幕上隐藏，但在源代码中可见，结果相同。
我无法隐藏它，因为我使用了一些类似于 masonry 的 jquery 插件，将其隐藏起来。
我认为更根本的是，您需要使用 javascript（例如 jQuery.hide(el)）从 view 中隐藏 - 从“源”中隐藏是不可能的。
这不是 SO 所说的问题的重复。这个问题询问取消注释/注释，而不是相关问题，即删除评论节点。此外，我拥有的一个有效用例是一种在 JSPA 上分离和停止视频元素以加快 IE 8 性能的快速简便的方法。

标签： javascript jquery comments element

【解决方案1】：

我对没有人给出以下解决方案印象深刻。以下解决方案需要一个容器。这个容器里面会有注释/未注释的代码。

function comment(element) {
    element.html('<!--' + element.html() + '-->')
}

function uncomment(element) {
    element.html(element.html().substring(4, element.html().length - 3))
}

function isCommented(element) {
    return element.html().substring(0, 4) == '<!--';
}

示例：https://jsfiddle.net/ConsoleTVs/r6bm5nhz/

【讨论】：

【解决方案2】：

您可以通过执行以下操作将元素注释掉：

function comment(element){
    element.wrap(function() {
        return '<!--' + this.outerHTML + '"-->';
    });
}

演示： http://jsfiddle.net/dirtyd77/THBpD/27/

【讨论】：

this.outerHTML 应该够了，不需要$()

【解决方案3】：

用注释包装元素，或者更具体地说，用具有该元素 HTML 的注释节点替换元素：

my_element_jq = $('.my_element');
comment = document.createComment(my_element_jq.get(0).outerHTML);
my_element_jq.replaceWith(comment);

切换回来：

$(comment).replaceWith(comment.nodeValue);

如果你没有对评论节点的引用，那么你需要遍历DOM树并检查每个节点的nodeType。如果它的值为 8，那么它就是一个注释。

例如：

<div id="foo">
    <div>bar</div>
    <!-- <div>hello world!</div> -->
    <div>bar</div>
</div>

JavaScript：

// .contents() returns the children of each element in the set of matched elements,
// including text and comment nodes.
$("#foo").contents().each(function(index, node) {
    if (node.nodeType == 8) {
        // node is a comment
        $(node).replaceWith(node.nodeValue);
    }
});

【讨论】：

【解决方案4】：

用于包装？

function wrap(jQueryElement){
    jQueryElement.before("<!--").after("-->");
}

不确定一旦包裹起来，您会发现 cmets 有多成功。使用正则表达式对 body 元素进行文本搜索是一种选择。

或者这个 - is it possible to remove an html comment from dom using jquery

【讨论】：

这不起作用：jsfiddle.net/zjjBE 它将第一个视为打开和关闭，第二个视为字符串。
很公平。无论如何，愚蠢的问题;）