Hide all DOM children until <hr / "> is found

Question

I wonder how to hide all elements until the first <hr/> . Then the loop should stop

  <div class='row-father'> <legend> Title here </legend> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <hr/> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <hr/> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <hr/> </div> 

...

 $('.row-father').find('*').each(function(){ if ($(this) != '<hr/>') $(this).hide(); }); 

Answer 1

Use this: $('.row-father > hr:first').prevAll(':not(legend)').hide(); See http://api.jquery.com/prevall/

Answer 2

You can detect this using .is('hr') .

code:

 $('.row-father').find('*').each(function() { if (!$(this).is('hr')) { $(this).hide(); } else { return false; } }); 

An example can be found here .

Answer 3

$('.row-father').find('hr').eq(0).prevAll('.row-fluid').hide();

Demo

Answer 4

you can also use

$('.row-fluid:first').nextUntil("hr").andSelf().hide();

http://jsfiddle.net/gDGmX/3/

Edit:

if you want to replace <hr/> with a div containing text, for example:

  <div class='row-father'> <legend> Title here </legend> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <div>test</div> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <hr/> <div class="row-fluid">...</div> <div class="row-fluid">...</div> <hr/> </div> 

you can try this code:

 $('.row-fluid:first').nextUntil("div>:contains('test')").andSelf().hide();