Access span.html() with jQuery-CodePudding

I am trying to get the content of the second span (result should be 2021) with jquery.

<div >
  <select id="ddlPrepPeriodItem_3" data-loaded-period-type="6" data-loaded-date-var="1" style="display:none;">
    <option value="y_2021" strstartdate="2021/01/01" strstopdate="2021/12/31">2021</option>
    <option value="y_2020" strstartdate="2020/01/01" strstopdate="2020/12/31">2020</option>
  </select>
  <button type="button"  title="" aria-haspopup="true" tabindex="0" style="width: 225px;">
   <span ></span>
   <span>2021</span>
  </button>
</div>

There is another div with class .prepPeriodItemSelection in the code so I tried this ( and dozens of variations...)

alert($('.prepPeriodItemSelection:nth-child(2) button span:nth-child(2)').html());

it always returns null

any ideas whats wrong

CodePudding user response：

Is this acceptable?

$('.prepPeriodItemSelection:nth-child(2) button > span:nth-child(2)').html();

CodePudding user response：

My bad, I had a error in the wait loop so the code was execute before the element was available in the DOM , I found another solution that work s now. Thanks to all , your support and input is very much appreciated.