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

Question

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

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

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

You can see my fiddle here.

有什么办法可以完成这个任务吗？

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>