使用 JQuery 过滤 HTML 内容，但排除某些元素答案

【问题标题】：Filter HTML Content with JQuery but exclude certain elements使用 JQuery 过滤 HTML 内容，但排除某些元素
【发布时间】：2011-10-22 05:31:58
【问题描述】：

我有一个帖子列表，我想删除除内容集“strong”之外的所有文本/HTML 内容。

原创

<li id="post">
    <p>
        <strong>Reality</strong>
    </p>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>
<li id="post">
    <p>
        <strong>Buzz</strong><br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>
<li id="post">
    <p>
        <strong>Innovation</strong><br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</li>

期望的结果

<li id="post">
        Reality
</li>
<li id="post">
        Buzz
</li>
<li id="post">
        Innovation
</li>

如何使用 JQuery 做到这一点？

【问题讨论】：

仅供参考，id 应该是唯一的，因此您应该将 id="post" 更改为 class="post"。
您的接受率非常好！ ;)

标签： jquery html filter

【解决方案1】：

下面的代码按预期工作。 将id="post" 替换为class="post"！！

小提琴：http://jsfiddle.net/GfsCB/

$("li.post").each(function(){
    var filtered = $("<li>").append($("strong", this).text())
    $(this).replaceWith(filtered);
});

循环遍历每个 <li> 项目。
新建<li>元素，并追加所有<strong>元素的文本内容
将当前选定的<li> 元素替换为刚刚创建的<li> 元素(filtered)。

【讨论】：

【解决方案2】：

我的解决方案是创建一个选择器，选择所有强 $("strong") 然后删除所有 li，然后删除 $("strong") 中的每个项目，将其附加到新的 li 中。

更新：

你可以试试这个：http://jsfiddle.net/6awfe/

$("li#post").each( function()
    {
        $(this).html("[strong start tag]" + $("strong", this).html()+"[strong end tag]");
    } )

【讨论】：

【解决方案3】：

我的解决方案是创建一个选择器，选择所有强 $("strong") 然后删除所有 li，然后删除 $("strong") 中的每个项目，将其附加到新的 li 中。

【讨论】：

【解决方案4】：

这应该会让你上路：

var htmlText = "";
$('.post').find('strong').each(function() {
    htmlText += "<li class=\"post\">" + $(this).text() + "</li>";
});

alert(htmlText);

【讨论】：

【解决方案5】：

$('.post').each(function(){
    $(this).html($('strong', this).text());
});

按照其他人的说法，将 id="post" 更改为 class="post"。

【讨论】：

【解决方案6】：

假设您要将id='post' 更改为class='post'（ids 应该是唯一的）：

$("li.post").each(function() {
   $(this).text($(this).find("strong").text());
});

这会保留与列表项关联的所有属性，并且只替换内容。

演示：http://jsfiddle.net/BRnZh/

【讨论】：