jquery在父div下面选择div

Question

I have a few divs set up like so:

 <div class="menu_options">
    <div class="parent_div">input field</div>
    <div class="children_div">
        <div class='something">field</div>
        <div class="something_else">field</div>
    </div>
 </div>

<div class="menu_options">
    <div class="parent_div">input field</div>
    <div class="children_div">
        <div class='something">field</div>
        <div class="something_else">field</div>
    </div>
 </div>

<div class="menu_options">
    <div class="parent_div">input field</div>
    <div class="children_div">
        <div class='something">field</div>
        <div class="something_else">field</div>
    </div>
 </div>

in jquery i am doing

        $('.parent_options').each(function() {
            $(this).click(function() {

            });
        });

right now $(this) is giving me the parent_div that i clicked on and I need to be able to move down to the children_div and hide the entire children_div. Any ideas. I know in prototype i used a down function but not sure if jquery has it.

Answer 1

If you want to hide .children_div after clicking on .parent_div use

  $('.parent_div').click(function() {
        $(this).siblings(".children_div").hide();
  });

Demo here

Answer 2

$('.parent_div').each(function() {
            $(this).click(function() {
        $(this).next().hide();
            });
        });​

Answer 3

If you're binding the function to all .menu-options , there's no need for each() . This should work if I understood your query properly:

$('.parent_div').click(function() {  
    $(this).siblings('.children_div').hide();
});

Answer 4

try .next()

 $( this ).next( ".tb-contents'" ).show(); 

This will work.

Thanks