jQuery function returning [object Object] after concatenating string

Question

I have a menu with the following menu structure:

<nav>
   <ul>

   </ul>
</nav>

With this function I'm trying to copy all titles from my page to the menu.

$('.pagetitle').each(function() {

  var titles = $(this).contents().clone();
  $('nav ul').html('<li><a>' + titles + '</a></li>');

});

It works just fine without adding the li and a tags but predefining the html tags in my menu, but I have to create them thru this function since I can't know how many titles there will be on the page.

I have read this post: jQuery each returns [object Object] and got a little wiser, but it did not solve my problem. If anyone could explain me why this is happing, that would be great!

titles is a jQuery object with string representation equals to [object Object], maybe you want instead: var titles = $(this).contents().clone().prop('outerHTML'); or var titles = $(this).contents().clone().html();. You just forgot in question to tell what you are looking for — A. Wolff
– A. Wolff, Commented Nov 30, 2014 at 14:37
Alternatively you can use .wrap() to wrap the contents with new containers. — Pointy
– Pointy, Commented Nov 30, 2014 at 14:38
@pointy @A. Wolff Thank you for replying. The page title elements are <h3> tags with content. — piggypig
– piggypig, Commented Nov 30, 2014 at 14:43

SaidbakR · Accepted Answer · 2014-11-30 14:42:14Z

1

Why not simply use $(this).html()

$('.pagetitle').each(function() {    
  var titles = $(this).html();
  $('nav ul').html('<li><a>' + titles + '</a></li>');

});

answered Nov 30, 2014 at 14:42

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

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

1 Comment

piggypig Over a year ago

I've accepted your answer because it's the most straightforward and close to my code. Thank you.

Arun P Johny · Accepted Answer · 2014-11-30 14:47:53Z

1

As @A.Wolff said the problem is titles is a jQuery object.

I would use .map() like

//to initialize the value
for (var i = 0; i < 10; i++) {
  $('<div />', {
    text: i,
    'class': 'pagetitle'
  }).appendTo('body')
}


//solution
$('.pagetitle').map(function() {
  //use .map() to create new `li` element for each `.pagetitle` element
  return $('<li />', {
    //set the pagetitle's content as its value
    html: $(this).contents().clone()
  }).get();
  //append the new `li` elements to `nav ul`
}).appendTo('nav ul')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul></ul>
</nav>

answered Nov 30, 2014 at 14:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

piggypig Over a year ago

Thanks for your comment, +1 for showing me an expert level of doing this. I've accepted sesem's answer because it's most straightforward and close to my code.

Triet Doan · Accepted Answer · 2014-11-30 14:49:33Z

0

To get the value of each item in .each() function, simply use $(this).html(). Furthermore, you should use .append() instead of .html().

So, your code should be:

$('.pagetitle').each(function () {
    var titles = $(this).html();
    $('nav ul').append('<li><a>' + titles + '</a></li>');
});

You can check it out here

answered Nov 30, 2014 at 14:49

Triet Doan

12.2k9 gold badges42 silver badges76 bronze badges

Collectives™ on Stack Overflow

jQuery function returning [object Object] after concatenating string

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related