[英]Display only one paragraphs…no matter if there are more, with blank, with white-space, with class…only and only with css
I am looking css properties to hide paragraphs with or without css class, if it contains white-space ( ) or blank, but wants to keep at least- only one paragraph with or without if there are more. 我正在寻找css属性来隐藏带有或不带有css类的段落,如果它包含空格()或空白,但是我希望至少保留一个段落,无论是否包含更多段落。
Hide paragraphs if it is blank or contains white-space( ) preferably with only css...if no other options at all then only with JavaScript/jquery 如果段落为空或包含空白(),则最好隐藏段落,最好仅使用CSS ...如果根本没有其他选项,则仅使用JavaScript / jquery
// Ideally I don't want to use javascript/jquery $("p").html(function(i, html) { return html.replace(/ /g, ''); });
p:nth-child(n+2):empty, p:nth-child(n+2):blank, .MsoNormal p:nth-child(n+2):empty, .MsoNormal p:nth-child(n+2):blank { margin: 0 0 0px; display: none; } p::before { content: ' '; } p:empty::before { content: ''; display: none; } p:first-child:empty+p:not(:empty)::before { content: ''; } p:first-child:empty+p:empty+p:not(:empty)::before { content: ''; } p::after { content: ''; display: none; p:empty::after { display: none; } p:first-child:empty+p:not(:empty)::after { content: ''; } p:first-child:empty+p:empty+p:not(:empty)::after { content: ''; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> some text - 1 </div> <p> </p> <p> </p> <p> </p> <div> some text - 2 </div> <p> </p> <div> some text - 3 </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div> some text - 4 </div> <p> </p> <p> </p> <div> some text - 5 </div> <p></p> <p></p> <div> some text - 6 </div> <p class="MsoNormal"></p> <p></p>
<b>So above html, I would like to display:</b>
<div> some text - 1 </div>
<p> </p>
<div> some text - 2 </div>
<p> </p>
<div> some text - 3 </div>
<p> </p>
<div> some text - 4 </div>
<p> </p>
<div> some text - 5 </div>
So, I am trying to get it through pseudo classes & pseudo elements, but no luck. 因此,我试图通过伪类和伪元素来获得它,但是没有运气。 (Note- I have jQuery which is working here, but don't want to use it preferably.)
(注意-我有在这里工作的jQuery,但不想使用它。)
You can't do this only with CSS, as far as I know. 据我所知,您不能仅使用CSS进行此操作。
With jQuery is the most easy and clean way to do this. 使用jQuery是最简单,最干净的方法。 I don't understand why you have jQuery but you don't want to use it but do this with pure js is more "ugly" for me.
我不明白为什么要使用jQuery,但您不想使用它,但是使用纯js进行此操作对我来说更“难看”。 Although I give you 2 pieces of code.
虽然我给你2条代码。
JS code: JS代码:
// get the elements and transform from HTMLCollection object to array
var array_p = document.getElementsByTagName("P");
array_p = Array.prototype.slice.call(array_p);
array_p.forEach(function(value, index) {
var text = value.innerHTML;
text = text.replace(new RegExp(' ', 'g'), '');
text = text.replace(new RegExp(' ', 'g'), '');
value.style.display = "none";
});
I add a jQuery code for example if you want to use it: 例如,如果您想使用它,则添加一个jQuery代码:
$.each($("p"), function(index, value) {
var text = $(this).html();
text = text.replace(new RegExp(' ', 'g'), '');
text = text.replace(new RegExp(' ', 'g'), '');
if (text.length == 0) {
$(this).css("display", "none");
}
}) })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.