Get div high up in the hierarchy

Question

I have this hierarchy in HTML

<div class="footer">
            <div class="send_show" style="height: 754px;"></div>
            <div class="forms_sends">
               <span class="sends">
                  <div class="icon-container">
                            <button class="send">ENVIAR</button>

                   </div>
            </div>
         </div>

and wish that when clicked on the class button .send, a message is displayed in send_show. Only that there are several hierarchies of these on the page, IE, should be taken to send_show of the respective button.

I’m using jQuery to accomplish this.

Answer 1

Using parents() to climb to the div "father" then descends with Children() to the div "daughter" you desire. So you can have this structure in several places because only the one that is together with the father will be affected.

$(".send").on('click', function() {
    $(this)
     .parents(".footer") //Sobe para o pai do evento click
     .children(".send_show") //Desce para a filha
     .html("Div mais próxima");
});

I hope that’s it.