删除倒空的段落，并转到下一个元素

我有一个带有文本的页面，但是一些容器在结尾处有空的段落标签。重要的是，我不会删除中间内容中的任何内容，只是在文本结束后的末尾。我的想法是首先循环遍历容器，然后以相反顺序检查所有段落标记，删除与正则表达式匹配的任何内容，并在它碰到某些内容时移至下一个元素。我为此创建了一个jsfiddle，但它只是从最后一个面板中删除它们。删除倒空的段落，并转到下一个元素

jQuery的

$(document).ready(function() { 
    $(".content").each(function() { 
     $($("p").get().reverse()).each(function() { 
      var $this = $(this); 
      if ($this.html().replace(/\s|&nbsp;/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/

我觉得我是如此接近，但它只是我够不着的地方。任何帮助都会非常棒！

来源

2016-06-08 jaread83

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

要：$($(this).find("p").get().reverse()).each(function() {

其实在原来的代码，这时，虽然是我们通过.content元素循环，在循环的每次迭代，我们查询p元素放在整个文档的上下文中，并且由于我们颠倒了结果，我们总是得到最后一个.content元素的最后一个p元素。

通过改变$("p")到$(this).find("p")，我们强迫jQuery的搜索只.content元素我们目前迭代里面p元素。

来源

2016-06-08 14:04:00

谢谢你解释我要去哪里错了。我现在明白我要去哪里错了。更新了我的jsfiddle，它工作正常！ – jaread83

添加this这里： -

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

Fiddle

这指定在each

jQuery的上下文到当前.content（选择器[，上下文]）

来源

2016-06-08 14:06:19 BenG

您的代码有两个问题。首先，您需要将段的相对指定为正在循环播放的内容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>

来源

2016-06-08 14:15:28 j08691

删除倒空的段落，并转到下一个元素

回答

相关问题