是否可以使用 jQuery 隐藏匹配的 html 注释上方的元素?

Question

我有一个奇怪的用例，我们的博客工具将<!-- Read More -->附加到帖子中，上面的任何内容都会被推送到我们的列表页面。

我想做的是找到匹配的注释，然后告诉它上面的任何<p>标签(在 DOM 中)都应该设置为.hide()或.remove()。这是我已经开始的，我不太确定我是否可以在 HTML 注释上选择一个.prevAll。

var content = $('.main').html();
//search for matching comment
var comment = content.match(/<!--.*?-->/);
alert(comment);
comment.prevAll('p').remove();

你可以在这里看到我的小提琴。

有没有办法去完成这个任务？

Answer 1

您可以获得任何评论过滤nodeType并检查特定值，例如：

//find read more comment
$('*').contents().filter(function() {
return this.nodeType === 8 && this.nodeValue.trim() === "Read More"; 
}).prevAll('p').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<p>
jhkdsjhjlasfkdldfasdfd
</p>
<div>
no-hide
</div>
<p>
jhkdsjhjlasfkdldfasdfd
</p>
<!-- Read More -->
<p>
dfasfsfkljfaskf;sa
</p>
<!-- test -->
</div>