Question

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

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

和

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

但他们也没有工作

＆＃13;

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

＆＃13;

<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>

＆＃13;

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();

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

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

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

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

没有跨度是按钮的祖先。

查找相对于按钮的嵌套跨度

1 个答案:

修改