Get HTML-Inhalte zwischen zwei Elementen

Question

ich einen HTML Text wie folgt aussehen:

<div id="content"> 
    <p>para1</p> 
    <p>para2</p> 
    <p>para3</p> 
    <p class="break">para4</p> 
    <div>img</div> 
    <p>para5</p> 
    <p>para6</p> 
    <p>para7</p> 
    <p class="break">para8</p> 
    <p>para9</p> 
    <p>para10</p> 
    <p>para11</p> 
    <p>para12</p> 
    <p class="break">para13</p> 
    <p>para14</p> 
    <p>para15</p> 
    <p>para16</p> 
</div> 

Ich möchte ein Array wie folgt erhalten:

// arr [0]

<p>para1</p> 
<p>para2</p> 
<p>para3</p> 
<p class="break">para4</p> 

// arr [1]

<p class="break">para4</p> 
<div>img</div> 
<p>para5</p> 
<p>para6</p> 
<p>para7</p> 
<p class="break">para8</p> 

// arr [2]

<p class="break">para8</p> 
<p>para9</p> 
<p>para10</p> 
<p>para11</p> 
<p>para12</p> 
<p class="break">para13</p> 

// arr [3]

<p class="break">para13</p> 
<p>para14</p> 
<p>para15</p> 
<p>para16</p> 

sorry für mein Englisch, wie kann ich dieses Array bekommen? oder mit jQuery?

Answer 1

http://jsfiddle.net/U35Yr/7/

Grundsätzlich durch jedes Kind durchlaufen und überprüfen, ob es break Klasse

var htmls = []; 
var html = ''; 
$('#content').children().each(function() { 
    var content = $('<div />').append($(this).clone()).html(); 
    html += content; 
    if($(this).hasClass('break')) { 
     htmls.push(html); 
     html = content; 
    } 

}); 
if(html.length > 0) htmls.push(html); // append the last portion 
console.log(htmls);