4

我正在尝试删除 a 中的所有 html 格式<div>，特定类除外。

我试过

$('div#text :not(a.keep)').contents().each(function () {
    $(this).html($(this).text());
});

但它不会改变 div 的内容。

样本输入：<span>a </span><span><a class="keep">b</a></span> c

所需的输出：a <a class="keep">b</a> c

为什么 ？

我为什么要这样做？我有一个 div，内容可编辑，我想格式化用户输入的内容。我有一个计时器，每隔几秒钟我就会检查 div 的内容以查找要格式化的内容，但我想保留已标记为保留的内容。

4

2 回答 2

1

您可以使用非选择器功能。

$('div#text').not(a.keep).contents().each(function () {     
    $(this).html($(this).text()); 
});

但是调用contents()似乎有些奇怪，它将返回文本节点以及 html 节点，并看到您正在尝试设置每个看起来很奇怪的选定元素的 html 属性（在文本节点上没有要设置的 html）

如果您想获取节点的所有文本并将该节点中的任何 html 替换为仅文本内容，则更改为

$('div#text').not(a.keep).children().each(function () {     
    $(this).html($(this).text()); 
});

但如果这就是你想要完成的，我会推荐

$('div#text').not(a.keep).children().each(function () {     
    var text = $(this).text();
    $(this).empty().html(text); 
});

因为更容易看出意图。a.keep如果您可以嵌套在所选元素之一中，那并不能解决递归问题

于 2012-10-11T12:18:36.240 回答
0

问题是你.keep可以在你元素的任何地方（深度）

这是另一种方法。
这个想法是获取您#text包含的所有元素，然后遍历每个元素以查看它是否符合您的要求。

这是一个示例

function getChildrenDeep(elem)
{
    var ret = [];

    $(elem).each(function(k,v){
        ret.push(v);
        if ($(v).children().length > 0) ret = $.merge(ret,getChildrenDeep($(v).children()));
    });

    return ret;
}
var plainChildren = getChildrenDeep($("#text")),
    final = '';

$(plainChildren).each(function(k,v){
    if (!$(v).hasClass("keep"))
        final += $(v).clone().children().remove().end().text(); /* See Reference */
    else
        final += $(v)[0].outerHTML;
});

document.write(final);

http://jsfiddle.net/5hjnX/4/

参考

于 2012-10-11T13:18:43.887 回答