Question

I got following repeating syntax and I want to keep all <h1> that is followed by at least one not hidden div, but remove the remaining orphaned <h1>:

<h1>FIRST</h1>
<div></div>
<div></div>

<h1>SECOND</h1>
<div style="display:none"></div>
<div></div>

<h1>THIRD</h1>
<div style="display:none"></div>
<div style="display:none"></div>

<h1>FOURTH</h1>
<div></div>
<div></div>

As you can see, sometimes there is a div preceding the <h1> that isn’t hidden. So in the third block I want to hide the <h1>, but not in the second one or any other one.

What I tried is basically searching for a case where an <h1> is followed by another <h1> while ignoring all the hidden elements in between:

$('h1').each(function(){
    if($(this).nextAll().not(':hidden') == $('h1')) { $(this).hide() }
})

Unfortunately it won’t hide any of the <h1> and I just can’t figure out why, although I suspect the :hidden attribute being the problem. It should be noted that in my real code the hidden <div> is not hidden by ‘display:none’, but by using jQuerys .hide()!

Hope someone can help out.

Answer 1

the most clean solution i can think of:

$('h1').each(function(){
  if ( $(this).nextUntil('h1').not(':hidden').length == 0 ) $(this).hide();
});​

example here: http://jsfiddle.net/sagivo/sTveD/