I am a beginner when it es to javascript/jquery..so if this question sounds silly,please forgive me.

While going through this tutorial ,I tried to write to javascript console ,values of some of the variables in the functions-so that I can better understand how the function works

$(document).ready(function(){
    $("div.post h2 a").click(function () {
    var a    = $(this),
    href = a.attr('href'),
    content  = a.parent().next();
    console.log('a='+a);
    console.log('a.get(0)='+a.get(0));
    console.log('a parent='+a.parent());
    console.log('a parent.get(0)='+a.parent().get(0));
    console.log("href="+href);
    console.log('content='+content);
    content.load(href + " #content");
    return false; 
});

I have modified the html slightly

<div class="post">
    <h2 id="h21"><a href="other/mypage.html">My Page</a></h2>
    <div class="content">
        Teaser text1...
    </div>
</div>
<div class="post">
    <h2 id="h22"><a href="other/myotherpage.html">My Other Page</a></h2>
    <div class="content">
        Teaser text2...
    </div>
</div>
});

when I click on the first link,I get this console log output

a=[object Object]
a.get(0)=file:///home/me/dev/misc/other/mypage.html
a parent=[object Object]
a parent.get(0)=[object HTMLHeadingElement]
href=other/mypage.html
content=[object Object]

I thought the $(this) expression in the function would be the element which was clicked(ie the first <a element).Why does it appear as [object Object].I couldn't make out how a.get(0) bees file:///home/me/dev/misc/other/mypage.html

Similarly,shouldn't the variable content be equal to the first div (containing Teaser text1)? Why does it appear as [object Object]?

I am a beginner when it es to javascript/jquery..so if this question sounds silly,please forgive me.

While going through this tutorial ,I tried to write to javascript console ,values of some of the variables in the functions-so that I can better understand how the function works

$(document).ready(function(){
    $("div.post h2 a").click(function () {
    var a    = $(this),
    href = a.attr('href'),
    content  = a.parent().next();
    console.log('a='+a);
    console.log('a.get(0)='+a.get(0));
    console.log('a parent='+a.parent());
    console.log('a parent.get(0)='+a.parent().get(0));
    console.log("href="+href);
    console.log('content='+content);
    content.load(href + " #content");
    return false; 
});

I have modified the html slightly

<div class="post">
    <h2 id="h21"><a href="other/mypage.html">My Page</a></h2>
    <div class="content">
        Teaser text1...
    </div>
</div>
<div class="post">
    <h2 id="h22"><a href="other/myotherpage.html">My Other Page</a></h2>
    <div class="content">
        Teaser text2...
    </div>
</div>
});

when I click on the first link,I get this console log output

a=[object Object]
a.get(0)=file:///home/me/dev/misc/other/mypage.html
a parent=[object Object]
a parent.get(0)=[object HTMLHeadingElement]
href=other/mypage.html
content=[object Object]

I thought the $(this) expression in the function would be the element which was clicked(ie the first <a element).Why does it appear as [object Object].I couldn't make out how a.get(0) bees file:///home/me/dev/misc/other/mypage.html

Similarly,shouldn't the variable content be equal to the first div (containing Teaser text1)? Why does it appear as [object Object]?

• javascript
• jquery
• html

4 Answers 4

There is a difference between these two lines:

console.log(content);
console.log('content=' + content);

The first just logs the content variable. The second does a concatenation operation, concatenating the string and the object, before logging it. Concatenating a string and an object results in the object's toString method being called, which results in [object Object]. To avoid this, don't do the concatenation and just log content directly. As mindandmedia ments, you can do this by passing the values as separate arguments to console.log:

console.log('content=', content);

Finally, any native DOM link element with an href attribute does have a toString method. This returns the href value. So console.log('a.get(0)=' + a.get(0)) gets the href value of the first element in the a set.

I thought the $(this) expression in the function would be the element which was clicked(ie the first <a element).Why does it appear as [object Object].

The variable a contains a jQuery object, and the toString method isn't overridden for it, so it uses the default implementation that returns the type of the object.

I couldn't make out how a.get(0) bees file:///home/me/dev/misc/other/mypage.html

The get methods returns DOM element objects from the jQuery object, and the toString method for an <a> element returns the URL that the link points to.

Similarly,shouldn't the variable content be equal to the first div (containing Teaser text1)? Why does it appear as [object Object]?

The variable content contains a jQuery element that contains the <div> element. Using content.get(0) would give you the DOM element.

$(this) is a jQuery object, which is why it shows as [object Object]. All jQuery select functions return a jQuery object. As above, you can use .html() to get the HTML of a jQuery object, or .text() to just get the text.

It's because jQuery is chainable so you can do things like $(this).next().parent() etc etc. Each "chain" returns a jQuery object that can then have another function run on it.

Edit:

As a side note, you can use $(this)[0] to return the DOM Element I believe

try removing the strings from each of your consoles so that you only output the actual variable.

e.g. replace:

console.log('a='+a);

with

console.log(a);

and so on.