[英]Remove empty <p>, but allow only one per group
I was wondering how to remove empty elements, but allow only one empty element per group (next to non-empty one) ? 我想知道如何删除空元素, 但每组只允许一个空元素(非空元素旁边) ?
Something like : 就像是 :
Example HTML : 示例HTML:
<p>Hello world</p>
<p><br></p>
<p><br></p> <!--This will remove-->
<p><br></p> <!--This will remove-->
<p>Lorem ipsum dolor sit amet</p>
<p><br></p>
<p><br></p> <!--This will remove-->
<p>Eum ne nostro admodum</p>
<p><br></p>
And jQuery for checking the empty elements : 和jQuery用于检查空元素:
var p_empty = $('p').filter(function(i,v){return $.trim($(v).text()).length===0;});
Now I got all empty elements, But any idea how to remove those next empty elements ? 现在我得到了所有空元素,但任何想法如何删除下一个空元素?
Workflow : http://jsfiddle.net/jmy0uzw1/ 工作流程: http : //jsfiddle.net/jmy0uzw1/
PS: I am looking for good JS performance also PS:我也在寻找良好的JS性能
In your case since you are not using containers, you will have to use sibling selectors +
and make sure the preceding p
element itself is not of .empty
在你的情况下,因为你没有使用容器,你将不得不使用兄弟选择器
+
并确保前面的p
元素本身不是.empty
$('p.empty:not(p:not(.empty) + p.empty)').remove();
var p_empty = $('p').filter(function(i, v) { return $.trim($(v).text()).length === 0; }); p_empty.addClass('empty'); $('p.empty:not(p:not(.empty) + p.empty)').remove();
p { padding: 3px 10px; background: #eee; color: #999; font-size: 12px; line-height: 12px; } p.empty { border: 1px dashed #fff; background: #edd; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <p>Hello world</p> <p> <br> </p> <p> <br> </p> <p> <br> </p> <p>Lorem ipsum dolor sit amet</p> <p> <br> </p> <p> <br> </p> <p>Eum ne nostro admodum</p> <p> <br> </p>
var p_empty = $('p').filter(function(i, v) { return $.trim($(v).text()).length === 0; }); p_empty.addClass('empty'); $('p.empty + p.empty').remove();
p { padding: 3px 10px; background: #eee; color: #999; font-size: 12px; line-height: 12px; } p.empty { border: 1px dashed #fff; background: #edd; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Hello world</p> <p> <br> </p> <p> <br> </p> <p> <br> </p> <p>Lorem ipsum dolor sit amet</p> <p> <br> </p> <p> <br> </p> <p>Eum ne nostro admodum</p> <p> <br> </p>
Try this: 尝试这个:
$('p.empty + p.empty').remove();
Full code 完整代码
var p_empty = $('p').filter(function(i, v) {
return $.trim($(v).text()).length === 0;
});
p_empty.addClass('empty');
$('p.empty + p.empty').remove();
Just add more to your filter 只需在滤镜中添加更多内容即可
var p_empty = $('p').filter(function(i,v){
return $.trim($(v).text()).length===0 && $.trim($(v).prev().text()).length===0;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.