How to get the text inside bootstrap collpase using jquery?

Question

This is my html and jquery code:

$('.edit').click(function(){
      let x = $(this).parents().find('.info').children().find('dd.redirectUrl').text() ;
      console.log(x) ;
})

<div id="accordion">
 <div class="card">
   <div class="card-header bg-dark d-flex flex-row align-items-center p-2">

         <button class="btn btn-outline-light rounded-circle" data-toggle="collapse" data-target="#${pos+1}"><i class="fa fa-plus"></i></button>

         <div class="text-light text-center w-100 code">
         ${obj.code}
         </div>

         <button class="btn btn-outline-primary edit rounded-circle"><i class="fa fa-pencil"></i></button>


         <button class="btn btn-outline-danger rounded-circle"><i class="fa fa-trash"></i></button>

  </div>
  <div id="${pos+1}" class="collapse info">
    <dl class='m-3'>
         <dt>Shortened URL</dt>
         <dd>${window.location.origin+ '/' + obj.code}</dd>
         <dt>Redirection URL</dt>
         <dd class="redirectUrl">${obj.redirectUrl}</dd>
        </dl>
     </div>
  </div>
</div>

There are 5 in total accordions each of them having different data inside div.info. When i click button.fa-pencil button of a particular accordion, I want to log out the div.redirectUrl text of that accordion. But my jquery code is logging out empty text.

Edit: Since, in an array I'm appending these accordions so the id's for div.collapse.info will be 1,2..5(due to pos+1) so Is there any way to log out the id of div.info when button.fa-trash is clicked ? Also, I have changed the arrow function but it's logging out all dd.redirectUrl text as single unit. I need only one Url text which is the child of the accordion whose button.fa-pencil was clicked.

Cuong Le Ngoc · Accepted Answer · 2019-07-12T08:43:24.140

Because you use arrow function $('.edit').click(() => { so this inside the click function is not the .click element. Change this to $('.edit').click(function() { then it will work as expected.

$('.edit').click(function() {
      let target_id = $(this).data('id');
      let x = $('#' + target_id).find('dd.redirectUrl').text() ;
      console.log(x) ;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
 <div class="card">
   <div class="card-header bg-dark d-flex flex-row align-items-center p-2">
   
         <button class="btn btn-outline-light rounded-circle" data-toggle="collapse" data-target="#${pos+1}"><i class="fa fa-plus"></i></button>
         
         <div class="text-light text-center w-100 code">
         ${obj.code}
         </div>
         
         <button class="btn btn-outline-primary edit rounded-circle" data-id="pos1"><i class="fa fa-pencil"></i></button>
         
         
         <button class="btn btn-outline-danger rounded-circle"><i class="fa fa-trash"></i></button>
         
  </div>
  <div id="pos1" class="collapse info">
    <dl class='m-3'>
         <dt>Shortened URL</dt>
         <dd>${window.location.origin+ '/' + obj.code}</dd>
         <dt>Redirection URL</dt>
         <dd class="redirectUrl">${obj.redirectUrl}</dd>
        </dl>
     </div>
  </div>
  <div id="pos2" class="collapse info">
    <dl class='m-3'>
         <dt>Shortened URL</dt>
         <dd>${window.location.origin+ '/' + obj.code}</dd>
         <dt>Redirection URL</dt>
         <dd class="redirectUrl">${obj.redirectUrl}2</dd>
        </dl>
     </div>
  </div>
</div>

Now it's logging up all the `div.redirectUrl` texts as a single unit, If click any of the 5 `button.edit`. How can i fix this to show only one text which comes under the same accordion? — splintercell9, Jul 12 '19 at 08:33
you can attract an data, for example `data-id` to the edit button refer to the target accordion id. Then get the text of `div.redirectUrl` inside this id when button clicked. Check my editted answer. — Cuong Le Ngoc, Jul 12 '19 at 08:46
Thanks, it worked perfectly even for the `button.fa-trash` to get the id using `data` attribute — splintercell9, Jul 12 '19 at 09:14

How to get the text inside bootstrap collpase using jquery?

1 Answers1