I have an html page something like this:

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

I want to get the filename which is present in <a> when user clicks one of the button. I tried in doing like this but its not working:

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

I have an html page something like this:

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

I want to get the filename which is present in <a> when user clicks one of the button. I tried in doing like this but its not working:

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

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

• use .prev() like var file = $(this).prev('.a-file').text(); – guradio Commented May 22, 2018 at 6:25

6 Answers 6

.closest() only searches for the parent so you can go to the parent list-group-item and then you can find the child using .children(). It is better to use id to search in DOM as it is indexed and search is faster.

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

closest is a bit of a misnomer; it finds the nearest direct ancestor that matches the given selector.

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

It looks like you want to select the previous element instead:

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

<script src="https://ajax.googleapis./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>

Or if there might be other elements in between, then use .find:

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

<script src="https://ajax.googleapis./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>

You can find previous element with prev() function of jquery.

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

<script src="https://ajax.googleapis./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>

If you have multiple .btn-current, you need to use this as selector. You might want to use prev instead of closest if the element is the previous clicked elements.

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

<script src="https://ajax.googleapis./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>

You can also use siblings method to find all siblings of selected element. You can also use selector expression to find particular sibling e.g siblings('some selector expression').

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

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