Get access to the child of a div in jquery

Question

function createPicItem(num) {
    $("<div></div>")
        .addClass("merchPic")
        .append($("<img/>")
                .attr("src", merch[num].picAdd)
               ).appendTo("#merchCatalog");
}//End of function CreatePicItem
//--------------------------------------------------
$("#merchCatalog div.merchPic").click(function () {
    alert($(this+">img").attr("src"));
});

When the div is clicked I want to alert the src of its inner image.

But when I click it nothing happens... even the alert dialog does not pop up.

What am I doing wrong?

**Wow** is your original indentation misleading. Barmar has helpfully cleaned it up for you. — T.J. Crowder, May 22 '15 at 22:01
I wonder if SO has statistics about how much time I spend editing compared to answering. :) — Barmar, May 22 '15 at 22:02
dear @Barmar I looked my question over again... What did u edit for me??... I didn't notice any change...Mention ur edit to me plz... Tnx :) — Shahrzad Parvizi, May 22 '15 at 22:16
I cleaned up the indentation, just like I said in the editing comment. — Barmar, May 22 '15 at 22:16

Alon Eitan · Accepted Answer · 2015-05-22T22:04:25.493

1

Try alert($(this).children("img").attr("src")); This will search for image element in the first level of the div

edited May 22 '15 at 22:04

answered May 22 '15 at 21:58

Alon Eitan

11,997
8
49
58

score 0 · Answer 2 · edited May 23 '17 at 12:21

I used find. The difference between find and children is that find traverses down the DOM. There's not much in it here though so it doesn't matter (but there's an interesting discussion about the speed of the two here)

alert($(this).find("img").attr("src"));

This fiddle shows it in action.

As has been suggested you could equally use children

alert($(this).children("img").attr("src"));

A few things to note though:

It's important that createPicItem() has run before you set up your click handler ($("#merchCatalog div.merchPic").click) because otherwise it won't have anything to attach to. A good solution can be seen here.
If you look at the console (developer tools) you will have noticed an error is thrown. The error tells you that your selector $(this+">img") doesn't work. The moral of the story, check the console!

Thank u so much for ur complete answer and explanation.:) – Shahrzad Parvizi May 23 '15 at 08:46 — Shahrzad Parvizi, May 23 '15 at 08:46

Get access to the child of a div in jquery

2 Answers2