点击按钮获取最近的元素答案

【问题标题】：Get nearest element on button click点击按钮获取最近的元素
【发布时间】：2018-05-22 05:55:31
【问题描述】：

我有一个类似这样的 html 页面：

<div class="list-group-item" style="border-left: none; border-right: none;">
    <img src="./img/desktop.png" height="25" width="25">
    <a class="a-file">testcase.txt</a>
    <button class="btn btn-default btn-sm btn-current" style="float: right;">
        <span class="glyphicon glyphicon-ok-circle span-current"></span>
    </button>
    <button class="btn btn-default btn-sm btn-star" style="float: right;">
        <span class="glyphicon glyphicon-star-empty span-star"></span>        
    </button>
</div>

当用户单击其中一个按钮时，我想获取<a> 中存在的文件名。我试过这样做，但它不起作用：

$(document).on('click','.btn-current',function(){
    var file = $('.btn-current').closest('.a-file').text();
    alert(file);
});

【问题讨论】：

像var file = $(this).prev('.a-file').text();一样使用.prev()

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

.closest() 只搜索父级，因此您可以转到父级list-group-item，然后您可以使用.children() 找到子级。最好使用id在DOM中搜索，因为它被索引并且搜索速度更快。

$(document).on('click', '.btn-current', function() {
  var file = $('.btn-current').closest('.list-group-item').children('.a-file').text();
  console.log(file);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
  <img src="./img/desktop.png" height="25" width="25">
  <a class="a-file">testcase.txt</a>
  <button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
  <button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

【讨论】：

【解决方案2】：

closest 有点用词不当；它找到与给定选择器匹配的最近的直接祖先。

描述：对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

您似乎想选择前一个元素：

$(document).on('click', '.btn-current', function() {
  var file = $('.btn-current')[0].previousElementSibling.textContent;
  console.log(file);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
  <img src="./img/desktop.png" height="25" width="25">
  <a class="a-file">testcase.txt</a>
  <button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
  <button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

或者如果中间可能有其他元素，则使用.find：

$(document).on('click', '.btn-current', function() {
  var file = $('.btn-current').parent().find('.a-file').text();
  console.log(file);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
  <img src="./img/desktop.png" height="25" width="25">
  <a class="a-file">testcase.txt</a>
  <button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
  <button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

【讨论】：

【解决方案3】：

你可以通过jquery的prev()函数找到前一个元素。

$(document).on('click','.btn-current',function(){
    var file = $(this).prev('.a-file').text();
    alert(file);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;">
<span class="glyphicon glyphicon-ok-circle span-current"></span>Click</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

【讨论】：

【解决方案4】：

如果你有多个.btn-current，你需要使用this作为选择器。如果元素是之前点击的元素，您可能希望使用 prev 而不是 closest。

$(document).on('click', '.btn-current', function() {
  var file = $(this).prev('.a-file').text();
  console.log(file);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="a-file">testcase1.txt</a>
<button class="btn btn-default btn-sm btn-current"><span class="glyphicon glyphicon-ok-circle span-current"></span> Btn 1</button>

<br />
<a class="a-file">testcase2.txt</a>
<button class="btn btn-default btn-sm btn-current"><span class="glyphicon glyphicon-ok-circle span-current"></span> Btn 2</button>


<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

【讨论】：

【解决方案5】：

您也可以使用siblings 方法来查找所选元素的所有兄弟姐妹。您还可以使用选择器表达式来查找特定的兄弟，例如 siblings('some selector expression')。

$(document).on('click', '.btn-current', function() {
      var file = $('.btn-current').siblings('.a-file').text();
      console.log(file);
});

【讨论】：

【解决方案6】：

$(document).on('click', '.btn-current', function() {
      var file = $('.btn-current').siblings('.a-file').text();
      alert(file);
});

【讨论】：