Question

i have a html text like this:

<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>

i want to get an array like this:

//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 for my english , how can i get this array? or with jQuery?

Answer 1

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

Basically iterate through each child and check if there’s break class

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