在另一个 div 中找到最近的 div

Question

Sample:

<div class="table_cover">
    <div class="table_element">
        <div class="column_expand_list">X</div>
    </div>
    <div class="element">YAY</div>
    <div class="table_element">
        <div class="column_expand_list">X</div>
    </div>
    <div class="element">YAY</div>
    <div class="table_element">
        <div class="column_expand_list">X</div>
    </div>
    <div class="element">YAY</div>
</div>

When i click "column_expand_list" i need to find closest "element". I have a function, but I don't understand why it doesn't work:

console.log($(this).parent().parent().closest('.element'));

What am I doing wrong?

Answer 1

You could simply use one .parent to go back .next() to get the div.element - you are using parent twice which takes you out of the actual parent table_cover div

Using .next() like this:

$(this).parent('div').next('.element').text()

Demo:

 $('.column_expand_list').click(function() { console.log($(this).parent('div').next('.element').text()); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table_cover"> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY 1</div> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY 2</div> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY 3</div> </div>

Answer 2

In your HTML there is no closest element with the class element . You can get the closest .table_element and from this element you can then navigate to the next() or prev() .element

closest() only traveres the DOM in the UP direction, that's why you can't find it from the clicked element you are on.

 $('.column_expand_list').on('click', function() { console.log($(this).closest('.table_element').next('.element')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table_cover"> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY</div> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY</div> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY</div> </div>

Answer 3

I guess this is just a repetition od @Cloned and @AlwaysHelping's answers, but anyway, here it is:

 $(".column_expand_list").click(function(){console.log($(this).closest(".table_element").prev()[0])})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table_cover"> <div class="table_element"> <div class="column_expand_list">X this will not find a suitable "parent"</div> </div> <div class="element">YAY 1</div> <div class="table_element"> <div class="column_expand_list">X click here.</div> </div> <div class="element">YAY 2</div> <div class="table_element"> <div class="column_expand_list">X</div> </div> <div class="element">YAY</div> </div>