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.