创建每个兄弟姐妹子女的列表

Question

我有多个分区和多个分区。每一节都应列出本节中所有的h3项标题。考虑到这个HTML：

<div class="allwrap">
    <div class="main-section" id="m1">  
       <h2>Main-1-Headline</h2>
       <ul class="sub-sections-list">
           <!-- generate LIs of each [#main-1 > .sub-section h3 text] -->
       </ul>        
       <div class="sub-section" id="m1-s1">         
           <h3>Main-1-Sub-1-Headline</h3>
       </div>       
       <div class="sub-section" id="m1-s2">         
           <h3>Main-1-Sub-2-Headline</h3>
       </div>               
   </div>   
   <div class="main-section" id="main-2">
       <h2>Main-2-Headline</h2>
       <ul class="sub-sections-list">
           <!-- generate LIs of each [#main-2 > .sub-section h3 text] -->
       </ul>        
       <div class="sub-section" id="m2-s1">         
           <h3>Main-2-Sub-1-Headline</h3>
       </div>       
       <div class="sub-section" id="m2-s2">         
            <h3>Main-2-Sub-2-Headline</h3>
        </div>              
    </div>  
</div>

因此，我遍历每个小节H3，现在有一个包含所有h3标题的数组，这不是我想要完成的：

var myList = [];
$('.main-section .sub-section').each(function(){
    myList.push($(this).find('h3').text());
}); 
$.each(myList, function(){
    var li = $('<li/>').appendTo('.sub-sections-list');
    $('<a/>').attr('href', '#').text(this).appendTo(li);
});

我怎样才能做到，不是所有章节的h3标题都在列表中，而只有各自父部分的标题？结果应该如下所示：

主-1-标题(主-1节开头)

• 主-1-次-1-标题
• 主题栏-1-2-标题 主-1-1-标题(第1小节开头) 这里有一些内容(不是在上面的HTML中，是为了保持简单) 主-1-2-标题(第2分节开头) 这里有一些内容(不是在上面的HTML中，是为了保持简单)

主-2-标题(主-2节开头)

• 主题栏-2-1-标题
• 主题栏-2-2-标题 主题栏-2-1分节-标题(第1小节开头) 这里有一些内容(不是在上面的HTML中，是为了保持简单) 主-2-2-标题(第2分节开头) 这里有一些内容(不是在上面的HTML中，是为了保持简单)

Answer 1

如下所示(优化版本)：

$('.main-section').each(function(){
  var ul = $(this).find('.sub-sections-list');
  $(this).find('h3').each(function(){
    ul.append('<li><a href="#">'+$(this).text()+'</a></li>');
  });
});

示例：https://jsbin.com/gefupivoji/edit?html,js,output

Answer 2

我想你想要这个。

更新的短途演示

​

$('.main-section h3').each(function(){
  $(this).parent().prevAll(".sub-sections-list").append('<li><a href="#">'+$(this).text()+'</a></li>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allwrap">
  <div class="main-section" id="m1">
    <h2>Main-1-Headline</h2>
    <ul class="sub-sections-list">
      <!-- generate LIs of each [#main-1 > .sub-section h3 text] -->
    </ul>
    <div class="sub-section" id="m1-s1">
      <h3>Main-1-Sub-1-Headline</h3>
    </div>
    <div class="sub-section" id="m1-s2">
      <h3>Main-1-Sub-2-Headline</h3>
    </div>
  </div>
  <div class="main-section" id="main-2">
    <h2>Main-2-Headline</h2>
    <ul class="sub-sections-list">
      <!-- generate LIs of each [#main-2 > .sub-section h3 text] -->
    </ul>
    <div class="sub-section" id="m2-s1">
      <h3>Main-2-Sub-1-Headline</h3>
    </div>
    <div class="sub-section" id="m2-s2">
      <h3>Main-2-Sub-2-Headline</h3>
    </div>
  </div>
</div>

​

老路

$('.main-section').each(function() {
  var myList = [];
  $(this).find("h3").each(function() {
    myList.push($(this).text());
  });
  $subSectionList = $(this).find('.sub-sections-list');
  $.each(myList, function() {
    var li = $('<li/>').appendTo($subSectionList);
    $('<a/>').attr('href', '#').text(this).appendTo(li);
  });
});