连接字符串后的jQuery函数返回[object Object]答案

【问题标题】：jQuery function returning [object Object] after concatenating string连接字符串后的jQuery函数返回[object Object]
【发布时间】：2023-03-14 07:01:01
【问题描述】：

我有一个具有以下菜单结构的菜单：

<nav>
   <ul>

   </ul>
</nav>

使用此功能，我试图将页面中的所有标题复制到菜单中。

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

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

});

不添加 li 和 a 标签但在我的菜单中预定义 html 标签，它工作得很好，但我必须通过这个函数创建它们，因为我不知道页面上会有多少标题。

我读过这篇文章：jQuery each returns [object Object] 并且变得更聪明了，但它并没有解决我的问题。如果有人能解释一下为什么会这样，那就太好了！

【问题讨论】：

.pagetitle 元素是什么样的？
titles 是一个 jQuery 对象，其字符串表示等于 [object Object]，也许你想要：var titles = $(this).contents().clone().prop('outerHTML'); 或 var titles = $(this).contents().clone().html();。你只是忘了告诉你在找什么
您也可以使用.wrap() 用新容器包装内容。
@pointy @A。沃尔夫谢谢你的回复。页面标题元素是带有内容的<h3> 标签。
@PatrickEvans 也许，不确定这里会发生什么

标签： javascript jquery html

【解决方案1】：

为什么不简单地使用$(this).html()

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

});

【讨论】：

我接受了您的回答，因为它是最直接且最接近我的代码的。谢谢。

【解决方案2】：

正如@A.Wolff 所说，问题是titles 是一个jQuery 对象。

我会像使用 .map() 一样

//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>

【讨论】：

感谢您的评论，+1 向我展示了这样做的专家水平。我接受了 sesem 的回答，因为它最直接且最接近我的代码。

【解决方案3】：

要获取.each() 函数中每个项目的值，只需使用$(this).html()。此外，您应该使用.append() 而不是.html()。

所以，你的代码应该是：

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

您可以查看here

【讨论】：