javascript - 创建每个 sibling 的 child 列表

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 标题都在列表中，而只有相应父部分的标题？结果应该如下所示:

Main-1-Headline(Main-section-1 开头)

• 主 1 子 1 标题

• 主 1 子 2 标题

  Main-1-Sub-1-标题(sub-section-1 的开头)

  这里有一些内容(为了简单起见，不在上面的 HTML 中)

  Main-1-Sub-2-Headline (sub-section-2 的开头)

  这里有一些内容(为了简单起见，不在上面的 HTML 中)

Main-2-Headline(Main-section-2 开头)

• 主2子1标题

• 主 2 子 2 标题

  Main-2-Sub-1-标题(sub-section-1 的开头)

  这里有一些内容(为了简单起见，不在上面的 HTML 中)

  Main-2-Sub-2-Headline (sub-section-2 的开头)

  这里有一些内容(为了简单起见，不在上面的 HTML 中)

Answer 1

我想你想要这个。

更新了短途演示

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