Question

我有一个菜单，其中包含以下菜单结构：

<nav>
   <ul>

   </ul>
</nav>

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

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

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

});

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

我已经阅读了这篇文章：jQuery each returns [object Object]并且有点明智，但它并没有解决我的问题。如果有人能解释我为什么会这么讨厌，那就太好了！

Answer 1

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

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

});

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

Answer 3

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

所以，你的代码应该是：

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

您可以查看here

jQuery函数在连接字符串后返回[object Object]

3 个答案: