通过使用 jQuery 排除其他 div 来从 div 获取 HTML

Question

我们需要为我们的系统抓取博客文章的正文（这是合法的，我发誓 - 我们有一个培训博客，我们希望在系统内的帮助对话框中显示内容）。这些博客是在生成 HTML 的第 3 方平台上编写的，如下所示：

<div class="post">
    <h3 class="title">Title content</h3>

    <div class="byline">
        Byline content
    </div>

    <div class="submissions">
        Submission content
    </div>

    <div class="buttons">
    </div>

    <p>Post body part 1</p>
    some more post body not in a tag, however the user enters it
    <p>Even more post body</p>

    <div class="tags">
        Tag content
    </div>      
</div>

我试图获取帖子 div 内的所有 HTML 内容，但不包括标题、署名、提交内容、按钮和标签部分。

如果我运行这个 jQuery：

$(".post").not(".title").not(".byline").not(".submissions").not(".buttons").not(".tags").html()

我会返回 post div 的全部内容，包括不需要的标题/div。我尝试过各种“不”的咒语，包括：“不”，以及谷歌搜索，直到我的眼睛受伤，但无济于事。

有什么想法吗？看起来应该很简单，所以我猜我错过了一些东西？谢谢！

Answer 1

尝试使用 find 方法和 :not like so

$('div.post').find(":not(.title,.byline,.submissions,.buttons,.tags)");

调味。

另一种选择是隐藏不需要的元素：

$('div.post').find('.title, .byline, .submissions, .buttons, .tags').hide();

Answer 2

您错误地使用了选择器。一旦找到 $(".post")，它就不会查找内部以排除该 div 的内容。 $(".post") 与选择器精确匹配，不是标题、署名、提交内容、无穷无尽。

我建议您以删除其他类为目标，然后获取 html() 或 .post。

有道理吗？

编辑：（请不要在没有尝试我的方法之前就投票否决我......它不是很好，但它有效）

$(".title").remove();
$(".byline").remove();
$(".submissions").remove();
$(".buttons").remove();
$(".tags").remove();
alert($(".post").html());

Answer 3

您应该能够使用带有 :not 选择器的 children() 方法来隔离该文本

$(".post").children(":not(.title,.byline,.submissions,.buttons,.tags)");

http://api.jquery.com/children/

或者完全隔离您想要的内容，您可以编写：

var $cleansed = $(".post").clone();
$cleansed.find(".title,.byline,.submissions,.buttons,.tags").remove();

// append() or $cleansed.html() this content somewhere