Have Geek Brain

How can I hide elements that don't have the following elements with a specific class?

I have the following html and I want to hide all lsHeader that does not have the following elements with a class contact using jquery.

<div id="B" class="lsHeader">B</div>
  <div id="contact_1" class="contact"> B.Contact1</b/>
  <div id="contact_2" class="contact"> B.Contact2</b/>
  <div id="contact_3" class="contact"> B.Contact3</b/>
  <div id="contact_4" class="contact"> B.Contact4</b/>
  <div id="contact_5" class="contact"> B.Contact5</b/>
<div id="C" class="lsHeader">C</div>
  <div id="contact_6" class="contact"> C.Contact6</b/>
  <div id="contact_7" class="contact"> C.Contact7</b/>
  <div id="contact_8" class="contact"> C.Contact8</b/>
  <div id="contact_9" class="contact"> C.Contact9</b/>
  <div id="contact_10" class="contact"> C.Contact10</b/>
<div id="D" class="lsHeader">D</div>
<div id="F" class="lsHeader">F</div>

Note

LsHeader has no children, I want to check based on the following elements.

0


a source to share


2 answers


How about this:

$(".lsHeader").each(function() {
    if (!$(this).next().is("div.contact")) {
        $(this).hide();
    }
});


Depending on your specific needs, you might want to replace next with the next one.

+4


a source


Are you generating (X) HTML? If yes, then:



<style>.IsHeader.empty {display: none;}</style>
<div id="D" class="lsHeader empty">D</div>
+1


a source






More articles:


All Articles