代码之家 › 专栏 › 技术社区 › sreepurna

点击按钮获取最近的元素

twitter-bootstrap-3 css3 html jquery javascript

sreepurna · 技术社区 · 7 年前

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

6 回复 | 直到 7 年前

mayank 7 年前

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

CertainPerformance 7 年前

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”>测试用例.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>

Kiran Shahi Jonny 7 年前

您可以使用 prev() jquery的函数。

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

Eddie 7 年前

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

tirthbal 7 年前

您也可以使用 siblings 方法查找所选元素的所有同级。您还可以使用选择器表达式来查找特定的同级,例如 siblings('some selector expression') .

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

foram kantaria 7 年前

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