从主容器中获取所有h2文本，将其显示在侧栏中

Question

我发誓我的代码是对的，但似乎没有用。这是我的小提琴： 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的声明。

＆＃13;

＆＃13;

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>');
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当您尝试获取时，元素匹配.block-dynamic ul不存在。

你需要有这样的东西

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

请注意，blockDynamic初始化blockArea初始化后<OnPlatform x:Key="AppFontFamily" x:TypeArguments="x:String" Android="customfont.otf#CustomFont-Regular"> </OnPlatform> <Style x:Key="labelFont" TargetType="Label"> <SetterProperty Property="FontFamily" Value="{StaticResource AppFontFamily}"></SetterProperty> </Style> 附加了内容。

Answer 3

在追加ul后声明ul。因为如果你以前这样做，var searchArea = $('main'); var blockArea = $('.sidebar .container'); var items = []; var title; 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(e) { title = $(this).text(); items.push(title); }); $.each(items, function(i, val) { blockDynamic.append('<li class="item-' + i + '">' + val + '</li>'); });不存在，因此变量为空

＆＃13;

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 4

在此行var blockDynamic = $（＆＃39; .block-dynamic ul＆＃39;）;该元素不存在，如果你想要，请试试这个：

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

Answer 5

获取h2而不仅仅是其内容：

searchArea.find('h2').each(function() {
  blockArea.append($(this).clone());
});