How to get the value of an element located in the parent element by class name

Question

I want to find the value of an element that is located in the parent, using the element's class name.

Below is my code that has a button in the same parent as the element I want to find, but when I click it I get "undefined".

 $(document).on('click', '.four', function(){ var select = $(this).parents(".parent .two").html(); console.log(select); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three </p> <button class="four"> button one </button> </div> <div class="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>

Answer 1

The class you are looking for (ie .two ) is a child of the same parent so it is a sibling . You don't need to traverse up the parents() and back to get the sibling, you can do it like this:

$(document).on('click', '.four', function(){   
    var select = $(this).siblings(".two").html();
}

Working Example:

 $(document).on('click', '.four', function(){ var select = $(this).siblings(".two").html(); console.log(select); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three </p> <button class="four"> button one </button> </div> <div class="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>

If you really need to get traverse the parents for some reason, then you do it like this -first traverse the parents to get the one with the class you want, then get its children() with class .two :

$(this).parents(".parent").children(".two").html();

Answer 2

 $(document).on('click', '.four', function(){ var select = $(this).parents(".parent").find('.two').html(); console.log(select); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three </p> <button class="four"> button one </button> </div> <div class="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>

Answer 3

Try this:

 let parent = document.getElementById('parent'); let childs = parent.childNodes; console.log(childs[1].className)

 <div class="parent" id="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>

Answer 4

You can try this

$(document).on('click', '.four', function(){
        console.log("clicked")
    var select = $(this).parent().find('.two').html();
  console.log(select);
 });

Answer 5

that ?

 document.querySelectorAll('button.four').forEach(btn=>{ btn.onclick=_=>{ console.log( btn.parentElement.querySelector('.three').textContent ) } })

 <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three</p> <button class="four"> button one </button> </div> <div class="parent "> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>