Question

我有一个像这样的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);
});

Answer 1

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

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

看起来您想要选择前一个元素：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用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>

Answer 3

如果您有多个.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>

Answer 4

.closest()仅搜索父级，以便您可以转到父list-group-item，然后您可以使用.children()找到该子级。

id

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

Answer 5

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

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

Answer 6

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

点击按钮获取最近的元素

6 个答案: