Learning jQuery selectors. How to alert the value of the selector?

Question

Take this code for example:

$('.photo').hover(
            function() {
                //display heading and caption
                $(this).children('div:first').stop(true,false).animate({top:0},{duration:200, easing: 'easeOutQuart'});
                $(this).children('div:last').stop(true,false).animate({bottom:0},{duration:200, easing: 'easeOutQuart'})
})

Lets say I want to know which element was selected with this line:

$(this).children('div:first')

Is it possible somehow to alert the targeted element? I tried:

something = $(this).children('div:first').val();
                alert (something);

or

something = $(this).children('div:first');
                alert (something);

With the first example I get blank alert. With second - Objext object.

Regards,

You simply need to use console.log instead of alert. You can then even hover the result in console and it will show where that element is on the page. — Esailija, Jul 18 '12 at 10:39
This should give you what you want: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html — Paul Fleming, Jul 18 '12 at 10:40

score 1 · Accepted Answer · answered Jul 18 '12 at 10:40

1

You can use the following.

something = $(this).children('div:first').text();
                alert (something);

or

something = $(this).children('div:first').html();
                alert (something);

answered Jul 18 '12 at 10:40

dotcoder

2,828
10
34
50

This gives you the inner Html/text not the whole element html. – Paul Fleming Jul 18 '12 at 10:43
1

What if the element doesn't have any content? This will be useless. – Esailija Jul 18 '12 at 10:43
I see Esailijas point with no element but .html() was just what I needed – user1016695 Jul 18 '12 at 10:57

score 1 · Answer 2 · answered Jul 18 '12 at 10:41

Of course! you can use console.log which works great with jQuery selections.

console.log($(this).children('div:first'));

if you're using firefox or chrome, press F12 to open your developer's console, navigate to the console tab, and you will see your entire selection and structures.

This is highly useful for also showing arrays and objects, and anything, in fact!

Learning jQuery selectors. How to alert the value of the selector?

2 Answers2