How can I get parents' parents' child's value using jQuery?

Question

I'm a student who is studying Python alone these days. Below is part of my HTML page's JavaScript code.

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm()">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
    </div>
    <br/>
</div>
`

javascript function :

function confirm(){
    alert('confirmed')
    let test = $(this).parent().parent().find(".card-img-top").attr("src");
    alert(test)
    window.location.reload()
}

What I want to do is:

When user clicks btn-success button, call confirm() function, and get img src (${image} in my code) to call AJAX.

I tried code above but it didn't work. How can I get img src value?

I am not using each elements' id because temp_html_0 will be repeated. thank you! — nya kim, Apr 19 '21 at 05:24
Where and how are you calling `$(this).parent().parent().find(".card-img-top").attr("src")`? I assume it's in the `confirm()` function but we probably need the code for it. Right now there is no [mcve] which makes it hard to guess what's wrong . — VLAZ, Apr 19 '21 at 05:34
Hi, just pass `this` inside your function i.e :`onclick="confirm(this)"` and then simply use `function confirm(el) {let test = $(el).parent().parent().find(".card-img-top").attr("src")}` — Swati, Apr 19 '21 at 05:36
Swati's answer works well!!! Thank you so much my sweet teacher!!!!! — nya kim, Apr 19 '21 at 05:40

score 0 · Answer 1 · answered Apr 19 '21 at 05:37

0

From your comment I see that temp_html_0 will be repeated, then why not just use a subclass with a unique identifier like the iteration index for example and add it to your image class as the following

<img class="card-img-top top-img-{index}">

And then you can pass that index to your function and get that element by using your logic.

answered Apr 19 '21 at 05:37

DevHub

522
6
15

1

"*then why not just use a subclass with a unique identifier like the iteration index for example*" because it's a bad idea. It's a crutch at best an unneeded most of the time with the existence of `data-*` attributes. – VLAZ Apr 19 '21 at 05:48
Yes thank you for the information, I'll consider this next time – DevHub Apr 19 '21 at 05:50

score 0 · Answer 2 · answered Apr 19 '21 at 05:51

You can pass the button reference in HTML event binding confirm(this) reject(this), then you may access the parent and image src in both of the methods as shown in be below snippet.

function confirm(btn) {
  var $btn = $(btn);
  var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
  console.log(`confirmed - ${imgSrc}`);
}

function reject(btn) {
  var $btn = $(btn);
  var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
  console.log(`rejected - ${imgSrc}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <img class="card-img-top" src="${image}" alt=" Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject(this)">Reject</button>
    </div>
    <br />
</div>

score 0 · Answer 3 · answered Apr 19 '21 at 06:12

The core of the problem is that you use the onclick attribute. The value of it is confirm(), so when activated it will call the function but not set the context in any way. So this will be window (if you're not in strict mode).

A quick fix would be to modify the function definition to function confirm(el){ and the HTML to onclick="confirm(this)" in order to have access to the element that's clicked as a parameter. This leads to this code:

function confirm(el){
    console.log('confirmed')
    let test = $(el).parent().parent().find(".card-img-top").attr("src");
    console.log(test)
    //window.location.reload()
}

//////////////////////////////

const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
    </div>
    <br/>
</div>
`

$("#main").append(temp_html_0);

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

However, a better technique is to use event binding on dynamically created elements using event delegation. It will execute the function with the correct context and further allows you to still have a single event handler but you do not mix the HTML with logic that JavaScript would use.:

function confirm(){
    console.log('confirmed')
    let test = $(this).parent().parent().find(".card-img-top").attr("src");
    console.log(test)
    //window.location.reload()
}

$("#main") // --> common ancestor for all your dynamic elements
  .on("click", ".btn-success", confirm);
//             ^^^^^^^^^^^^^^  ^^^^^^^ --> event handler to execute
//              ↳ element to monitor for clicks

function reject(){
    console.log('rejected');
}

$("#main").on("click", ".btn-danger", reject);


//////////////////////////////

const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success">Confirm</button>
        <button type="button" class="btn btn-danger">Reject</button>
    </div>
    <br/>
</div>
`

$("#main").append(temp_html_0);

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

score -1 · Answer 4 · edited Apr 19 '21 at 06:38

-1

You can directly pass image src as parameter into confirm function call like this:

<button type="button" class="btn btn-success" onnclick="confirm(${image})">Confirm</button>

and you can get this parameter value inside confirm function.

edited Apr 19 '21 at 06:38

Makyen

31,849
12
86
121

answered Apr 19 '21 at 05:54

tecknotes

1
2

How can I get parents' parents' child's value using jQuery?

4 Answers4