Get Child Attribute using JQUERY

Question

I am creating a link gallery.

HTML:

<div class="link">
    <header>Test Header</header>
    <a href="http://www.google.com/">Click Here</a>
</div>

I want to go to the A element's URL when clicking anywhere in the div.

Javascript with JQUERY 3.2.1:

$(function() {
    $("div.link").click(function() {
        $url = $this.children("a").attr("href");
        alert($url);
    });
});

It doesn't alert the URL

I have also tried:

$(function() {
    $("div.link").click(function() {
        $url = $this.find("a:first-child").attr("href");
        alert($url);
    });
});

It returns a collection instead of a single element so I tried the following:

$function() {
    $("div.link").click(function() {
        $url = $this.find("a");
        alert($url[0].attr("href"));
    });
});

Neither approach is working. I have confirmed the click selector is functioning by testing it with a simple alert("hello");

EDIT: I was using $this instead of $(this).

$this isn’t defined. Use the browser console (dev tools) (hit F12) and read any errors. — Sebastian Simon
– Sebastian Simon, Commented Dec 5, 2017 at 16:19
oh wow. I cannot believe I made such a stupid mistake. Of course it is $(this). I am an idiot. I have been developing in PHP so much lately it must have corrupted my mind. — Flux Kraken
– Flux Kraken, Commented Dec 5, 2017 at 16:20

gurvinder372 · Accepted Answer · 2017-12-05 16:29:51Z

1

I want to goto the A element's URL when clicking anywhere in the div.

Based on the code you have shared, $this seems to be undefined

If you just want to fetch the href property of the child anchor tag, then simply

$("div.link").click(function() {
    var href = $(this).find("a").attr( "href" ); //attr will fetch the attribute of first element in the result of find
});

If you want to click on the child anchor tag, then try using one of the following ways

$("div.link").click(function() {
    $(this).find("a").first().click();
});

or

$("div.link").click(function() {
    $(this).find("a").click();
});

or

$("div.link").click(function() {
    $(this).find("a").trigger( "click" );
});

or if you just want to go the URL

$("div.link").click(function() {
    window.location.href = $(this).find("a").attr( "href" );
});

edited Dec 5, 2017 at 16:29

answered Dec 5, 2017 at 16:16

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Flux Kraken Over a year ago

This is correct. I don't know what I was thinking with $this. I have no idea. I am selecting this as the answer in 7 minutes when I can. Dumb question.

gurvinder372 Over a year ago

@Velocibadgery Try using developer-tools of a browser more often (like console, element-inspector) - this kind of issues will become easier to spot.

edkeveked · Accepted Answer · 2017-12-05 16:17:17Z

0

If you want to get the href attribute when clicking on the div element, you can consider using the selector $(".nameOfDivClass"). On the element selected you will bind a function that will get your href.

$(".link").on("click", function(){
 console.log($(this).children("a").attr("href"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
    <header>Test Header</header>
    <a href="http://www.google.com/">Click Here</a>
</div>

answered Dec 5, 2017 at 16:17

edkeveked

18.4k10 gold badges60 silver badges95 bronze badges

Comments

ADyson · Accepted Answer · 2017-12-05 16:20:53Z

0

If you check your browser's console, you'll have an error saying $this is not defined. It should be $(this), in order to turn this (the raw HTML element clicked on) into a jQuery object on which you can the run jQuery methods such as .find() and .attr().

Additionally, this version will actually cause the navigation action rather than just alerting the URL:

$("div.link").click(function() {
    $(this).find("a").click();
});

answered Dec 5, 2017 at 16:20

ADyson

62.9k16 gold badges87 silver badges100 bronze badges

Collectives™ on Stack Overflow

Get Child Attribute using JQUERY

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related