jquery - 从主容器中获取所有 h2 文本，将它们显示在侧边栏中

Question

我发誓我的代码是正确的，但它似乎不起作用。这是我的 fiddle : https://jsfiddle.net/py5cvpmz/1/

这是 jQuery 代码:

var searchArea = $('main');
var blockArea = $('.sidebar .container');
var blockDynamic = $('.block-dynamic ul');
var items = [];
var title;

blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');

searchArea.find('h2').each(function(e) {
  title = $(this).text();
  items.push(title);
});

    $.each(items, function(i, val) {
      // When I use a console.log here to output 'val', it works fine
      blockDynamic.append('<li class="item-' + i + '">' + val + '</li>');
    });

Answer 1

您正在缓存 blockDynamic，然后再将其引用的元素附加到 blockArea。要查看您的代码是否有效，请在附加调用之后移动 blockDynamic 的声明。

var searchArea = $('main');
var blockArea = $('.sidebar .container');
blockArea.append('<div class="sidebar-item block-dynamic"><p>Sidebar menu</p><ul></ul></div>');

var blockDynamic = $('.block-dynamic ul');

searchArea.find('h2').each(function(i, e) {
  var title = $(this).text();
  blockDynamic.append('<li class="item-' + i + '">' + title + '</li>');
});

main {
  width: 300px;
  float: left;
  height: auto;
  padding: 20px;
  background-color: #ccc;
}

main h2 {
  width: 100%;
  text-align: center;
}

.sidebar {
  float: left;
  width: 200px;
  margin-left: 20px;
  background-color: #333;
}

.sidebar .container {
  width: 100%;
  height: auto;
  color: #fff;
  padding: 20px;
}

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


</script>
<main>
  <h2>
this is a test h2
</h2>
  <h2>
this is another test h2
</h2>
  <h2>
this is, once again, a test h2
</h2>
  <h2>
this is the last test h2
</h2>
</main>
<div class="sidebar">
  <div class="container">
    <!-- Here I want all the H2 titles as menu items -->
  </div>
</div>