Как разделить контент ниже каждого h3 с помощью jQuery?

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