JQuery测试HTML内容的类/有条件地设置元素的CSS的内容

Question

I have a bunch of divs with the class "eac-item".

Some of the items have content - but others are "blank" and only come up with this:

<div class="eac-item"><br></div>

What would the syntax be in JQuery to add a CSS property of "display:hidden" to those specific items?

if($('.eac-item').html() == "<br>") { {$(this).hide } ...?  

How do you handle the syntax for this type of function?

Answer 1

One way to hide the elements (add display: none ) would be iterate through every .eac-item using each() :

 $('.eac-item').filter(function(index) { // Filter all elements whose only child is a <br> return $("*", this).length === 1 && $("br", this).length === 1; }).each(function() { $(this).hide(); }); 

 .eac-item { border: 2px #000 solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="eac-item"> <br> </div> <div class="eac-item">This is not hidden.</div> 

You might want to use remove() instead of hide() , if you're really trying to remove the element from DOM.

Answer 2

Following code should do the trick

$(".eac-item").each(function(){
  if ($(this).html() == "<br>")
    $(this).hide();
});

but i would suggest to go with below approach

 $(".eac-item").each(function(){
      if ($.trim($(this).text()) == "")
        $(this).hide();
    });