Find nested span relative to button

Question

I am not able to get the text value of .upper and .lower at this example. I already tried

var upper = $(this).closest('.col-md-12').find('.lower').text();

and

var upper = $(this).closest('.col-md-6').find('.lower').text();

but they didn't work either

$('#done').on('click', function(e) {

  var upper = $(this).closest('span').find('.lower').text();
  console.log(upper);
  var lower = parseInt($(this).prev().text());
  console.log(lower);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-1 text-center">
    <div class="col-md-12">
      <div class="col-md-6 text-center"><span class="hidden-color"></span><span class="upper" id="ma-1-0">16</span>
      </div>
      <div class="col-md-6 text-center lower-box"><span class="hidden-color"></span><span class="lower" id="ma-2-0">13</span>
      </div>
    </div>
    <div class="col-md-12">
      <button class="btn btn-success" id="done">Get Upper and Lower</button>
    </div>
  </div>
</div>

Answer 1

In order to get to those spans from the #done button, traverse up the DOM to a common ancestor before using find() to locate the appropriate span.

In my example below, I've used the containing div.row as the common ancestor. Given your HTML code, it looks like you could also use div.col-md-1 because the button and the spans are both descendants thereof.

$('#done').on('click', function(e) {

  var upper = $(this).closest('.row').find('.upper').text(),
      lower = $(this).closest('.row').find('.lower').text();
      
  jQuery('div#output').html('<p>Upper: '+upper+'</p><p>Lower: '+lower+'</p>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-1 text-center">
    <div class="col-md-12">
      <div class="col-md-6 text-center"><span class="hidden-color"></span><span class="upper" id="ma-1-0">16</span>
      </div>
      <div class="col-md-6 text-center lower-box"><span class="hidden-color"></span><span class="lower" id="ma-2-0">13</span>
      </div>
    </div>
    <div class="col-md-12">
      <button class="btn btn-success" id="done">Get Upper and Lower</button>
    </div>
  </div>
</div>


<div id="output"></div>

---

Edit

Here are some explanations of why code didn't work:

var upper = $(this).closest('.col-md-12').find('.lower').text();

The button and the spans are children of two different .col-md-12 elements. The one that is an ancestor of the button is not an ancestor of the spans.

var upper = $(this).closest('.col-md-6').find('.lower').text();

The button is not a descendant of any .col-md-6 element. No such closest element exists.

var upper = $(this).closest('span').find('.lower').text();

There is no span that is an ancestor of the button.