查找相对于按钮的嵌套范围

Question

在此示例中，我无法获取 .upper 和 .lower 的文本值。我已经试过了

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

和

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

但他们也没有用

$('#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

为了从 #done 按钮到达这些跨度，在使用 find() 找到合适的跨度之前，向上遍历 DOM 到一个共同的祖先。

在我下面的示例中，我使用包含 div.row 作为共同祖先。鉴于您的 HTML 代码，您似乎也可以使用 div.col-md-1 因为按钮和跨度都是其后代。

$('#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>

编辑

以下是代码无法运行的一些解释：

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

按钮和 span 是两个不同 .col-md-12 元素的子元素。按钮的祖先不是跨度的祖先。

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

该按钮不是任何 .col-md-6 元素的后代。不存在这样最接近的元素。

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

没有作为按钮祖先的跨度。

查找相对于按钮的嵌套范围

Find nested span relative to button

jquery

dom-traversal

编辑