JQuery not able to identify the buttons present in a reference div's parent-CodePudding

I am using JQuery 3.6.1 and I am trying to fetch these Buttons 1 & 2 using Jquery.

<div  role="dialog">
  <div id="Dialog"/>
  <div >
    <div >
      <button type="button" >Button 1</button>
      <button type="button" >Button 2</button>
    </div>
  </div>
</div>

Assuming that I can't make any change to the HTML and can't add ids to the other divs. I know the id of "Dialog" div and want to fetch those 2 buttons present in the above html. Earlier when we were in JQuery 2.2.4 version, this code used to return those 2 buttons correctly: var button_list = $("#Dialog").parent().find("button.ui-button.ui-button-text-only"); But this has stopped working after JQuery upgrade. But don't see any depreciation warning or console errors. Hence want to know what am I doing wrong here?

I have tried the following: var button_list = $("#Dialog").parent("button.ui-button.ui-button-text-only");

But this isn't working. I have also tried closest, sibling and other functions but none of them worked. This worked though: var button_list = $(".buttonset").children(".ui-button"); and though this seems to a valid solution to the problem but I am just curious as why parent is not working in this case?

CodePudding user response：

It looks like the ui-button-text-only class has been removed from the buttons in this version. Removing that from the selector seems to work:

var button_list = $("#Dialog").parent().find("button.ui-button");
console.log(button_list[0], button_list[1])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  role="dialog">
  <div id="Dialog"/>
  <div >
    <div >
      <button type="button" >Button 1</button>
      <button type="button" >Button 2</button>
    </div>
  </div>
</div>