Getting the parent div from a current div in jquery-CodePudding

I have added a dynamic class called hello to the last question from the form. I am trying to traverse through the DOM to get the grandparent element .question-popup but for some reason it does not work. Ideally once I get to question-popup from hello I want to be able to get to the to change the text of the button the "NEXT STEP".

$(".js-cme-next-question-button").click(function(){
     $(".js-test-questions-wrap .c-cme-test:last .o-overlay__question").addClass("hello");
     console.log($(".hello").closest(".question-popup"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
     <div >
          <div >counter</div>
          <div > **hello added dynamically**
          <div >
          <div >
     </div>
</div>

<div >
     <a href="#" id="ic-next-question" >Next question</a>
</div>

CodePudding user response：

You can do so with plain javascript. But be warned your html code isn't well structured. But mine is so:

var hello = document.querySelector(".hello");
var parent = hello.closest(".question-popup");
var sibling = parent.nextElementSibling;
var button = sibling.querySelector(".c-button")
button.innerText = "NEXT STEP";

<div >
  <div >
    <div >counter</div>
    <div > **hello added dynamically**</div>
    <div ></div>
    <div ></div>
  </div>
</div>
<div >
  <a href="#" id="ic-next-question" >Next question</a>
</div>