How to retrieve and set text on layered span tag using jquery-CodePudding

I have the following button element. It has no ID tag.

<button type="button"  data-ng-click="Rules.click_next(data, Form.items['next'])"><div ><!-- ngIf: '' && 'left' == 'left' -->
<span >next</span><!-- ngIf: '' && 'left' == 'right' --></div></button>

I am trying to retrieve the value of the button that I see on the screen which is 'next'. And I would also like to change this value. There is no id tag, so I am trying to use the css classes. Here are my attempts to retrieve the value from this element, but they both return nothing.

//First attempt

console.log("button text = "   $('.wdg-button-label .dock-alter-next-options').text());

//Second Attempt

console.log("button text = "   $('.btn .wdg-button').text());

CodePudding user response：

You can do this two ways.

Using classes for the same span as below

console.log("button text = "   $('.wdg-button-label.dock-alter-next-options').text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button"  data-ng-click="Rules.click_next(data, Form.items['next'])">
  <div >
    <!-- ngIf: '' && 'left' == 'left' -->
    <span >next</span><!-- ngIf: '' && 'left' == 'right' -->
  </div>
</button>

The other way is to use jQuery children method and access the element you want the text from as below:

console.log("button text = "   $('.btn.wdg-button').children('div').children('span').text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button"  data-ng-click="Rules.click_next(data, Form.items['next'])">
  <div >
    <!-- ngIf: '' && 'left' == 'left' -->
    <span >next</span><!-- ngIf: '' && 'left' == 'right' -->
  </div>
</button>