我有一个网站有很多段落。其中一些有文本和图像:

<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph<img alt="alt" src="src"/></p>
<p>fifth paragraph</p>

我想用<img>标记在新段落中对段落进行编号:
<p id="1">first paragraph</p>
<p id="2">second paragraph</p>
<p id="3">third paragraph</p>
<p id="4">fourth paragraph</p>
<p id="5"><img alt="alt" src="src"/></p>
<p id="6">fifth paragraph</p>

请注意,如果第4段中的文字在图像之后,则最终情况应为:
<p id="1">first paragraph</p>
<p id="2">second paragraph</p>
<p id="3">third paragraph</p>
<p id="4"><img alt="alt" src="src"/></p>
<p id="5">fourth paragraph</p>
<p id="6">fifth paragraph</p>

现在我只有这段代码,但它没有将图像添加到单独的段落中:
elem.find('p').each(function () {
    id++;
    $(this).attr('id', 'id_' + id);
});

最佳答案

一种方法:

$('p').each(
    function(i){
        while(this.childNodes.length > 1) {
            var p = document.createElement('p');
            p.appendChild(this.childNodes[1]);
            this.parentNode.insertBefore(p,this.nextSibling);
        }
    });

$('p').attr('data-index',function(i) { return i; });​​​​​​​​​​​

JS Fiddle demo
为了保持子节点的顺序,我修改了第一段代码(它在this example using the above code中有缺陷(请查看textNode后面的第二段代码,它在错误的位置):
$('p').each(
    function(i){
        while(this.childNodes.length > 1) {
            var p = document.createElement('p');
            p.appendChild(this.lastChild);
            this.parentNode.insertBefore(p,this.nextSibling);
        }
    });

JS Fiddle demo

09-10 04:23
查看更多