如何使用jQuery在每個h3以下分割內容？

Question

我有HTML的和平，看起來像這樣：

<h3>PETIT DEJEUNER</h3> 
<p>FRANS ONTBIJT</p> 
<p>CROISSANT</p> 
<p>CROISSANT</p> 

<h3>AUTRE PETIT DEJEUNER</h3> 
<p>FRANS ONTBIJT</p> 
<p>CROISSANT</p> 
<p>CROISSANT</p> 

<h3>AND ONE MORE DEJEUNER</h3> 
<p>FRANS ONTBIJT</p> 
<p>CROISSANT</p> 
<p>CROISSANT</p> 

課程內容會有所不同。不幸的是，我不控制HTML，它是從另一個來源提供的。我可以在每h3分割內容，創建一個這樣的集合：

menu = [ 
    { 
     title: 'PETIT DEJEUNER', 
     contents: [<p contents>,<p contents>,<pcontents>] 
    }, 
    { 
     title: 'AUTRE PETIT DEJEUNER', 
     contents: [<p contents>,<p contents>,<pcontents>] 
    }, 
] 

我正在使用jQuery。謝謝！

Answer 1

您可以結合nextUntil()和filter()到<h3>元素之間匹配的段落，並使用map()來構建陣列：

var menu = $("h3").map(function() { 
    var $this = $(this); 
    return { 
     title: $this.text(), 
     contents: $this.nextUntil("h3").filter("p").map(function() { 
      return $(this).text(); 
     }).get(); 
    }; 
}).get(); 

Answer 2

var menu = []; 

$("<h3>PETIT DEJEUNER</h3><p>FRANS ONTBIJT</p><p>CROISSANT</p><p>CROISSANT</p><h3>AUTRE PETIT DEJEUNER</h3><p>FRANS ONTBIJT</p><p>CROISSANT</p><p>CROISSANT</p><h3>AND ONE MORE DEJEUNER</h3><p>FRANS ONTBIJT</p><p>CROISSANT</p><p>CROISSANT</p>") 
    .filter('h3') 
    .each(function() { 
     menu.push({ 
        title: $(this).text(), 
        contents: $(this).nextUntil('h3').map(function() { 
           return $(this).text(); 
          }).get() 
        }); 
    });