How to manipulate an element with jQuery when they are at the same hierarchy level?

Question

echo '<div class="servico">';
    ?><p class="servico_title opensans fw700 fs16"><?php the_title() ?></p><?php
    echo '<img src="'.UP.'/2015/08/enfeite_serv.jpg" width="100%" height="auto" class="enfeite_serv">';
    echo '<img src="'.UP.'/2015/08/arrow-down.jpg" class="chama_servico">';
    echo '<div class="servicos_the_content opensans fs14 fw400 white">'.content(18).'</div>';
echo '</div>';

I want through the chama_servico manipulate servicos_the_content. I started but I don’t know how to finish.

jQuery(function($){     

    $(".chama_servico").on('click', function(){

        var atributo = jQuery(this).parent('.servico') ...

    });

});

I’ll put a class active in the servicos_the_content.

Answer 1

You can climb the DOM .servico and then descend to .servico_title. Then you would use:

$(".chama_servico").on('click', function(){
    var atributo = $(this).closest('.servico').find('.servico_title').html();
});

I used .html() as an example, to fetch the html of this element p.