反向删除空白段落，然后转到下一个元素

Question

我有一个带有文本的页面，但一些容器的段落标签为空，每个标签都在末尾。重要的是，我不删除内容之间的任何内容，只是在文本完成后的最后。我的想法是先遍历容器，然后以相反的顺序检查所有段落标签，删除任何与正则表达式匹配的标签，当它遇到一些内容时 - 移动到下一个元素。我为此创建了一个 jsfiddle，但它只将它们从最后一个面板中删除。

jquery

$(document).ready(function() {
    $(".content").each(function() {
        $($("p").get().reverse()).each(function() {
            var $this = $(this);
            if ($this.html().replace(/s| /g, '').length == 0) {
                $this.remove();
            } 
            else {
                return false;
            }
        });
    });
});

.HTML

<div class="content">
    <p>Blah</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Another Paragraph I want to keep</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>
<div class="content">
    <p>Blah</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Another Paragraph I want to keep</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>
<div class="content">
    <p>Blah</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Another Paragraph I want to keep</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>another paragraph</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

https://jsfiddle.net/659Lejgz/1/

我觉得我离得很近，但它只是遥不可及。任何帮助都会很棒！

Answer 1

您需要

更改$($("p").get().reverse()).each(function() {

收件人： $($(this).find("p").get().reverse()).each(function() {

实际上，当原始代码中发生时，尽管我们正在循环.content元素，但在循环的每次迭代中，我们在整个文档的上下文中查询p元素，并且由于我们反转结果，我们总是得到最后一个.content元素的最后一个p元素。

通过将$("p")更改为$(this).find("p")，我们强制jQuery仅在我们当前正在迭代的.content元素中搜索p元素。

Answer 2

您的代码有两个问题。首先，您需要指定相对于要循环的内容div 的段落，否则将它们视为一组。另一个问题是，当您向后循环并点击每个div 中的第一个非空段落时，实际的删除需要停止。

这应该可以解决问题：

$(".content").each(function() {
  $($("p", this).get().reverse()).each(function() {
    if ($.trim($(this).text()).length === 0) {
      $(this).remove();
    } else {
      return false;
    }
  });
});

.content {
  background-color: red;
  border: 1px solid black;
  font-size: 18px;
  margin-bottom: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <p>Blah</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Another Paragraph I want to keep</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="content">
  <p>Blah</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Another Paragraph I want to keep</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="content">
  <p>Blah</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Another Paragraph I want to keep</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>another paragraph</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

Answer 3

在此处添加this：-

$($("p", this).get().reverse()).each(function() {

小提琴

这将指定each中当前.content的上下文

jQuery（ selector [， context ] ）