获取两个元素之间的html内容

时间:2012-04-02 08:25:38

标签: javascript

我有一个像这样的HTML文字:

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

我想得到一个像这样的数组:

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

对不起我的英语,我怎么能得到这个阵列?还是用jQuery?

1 个答案:

答案 0 :(得分:4)

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

基本上遍历每个孩子并检查是否有break

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