我有一个网站有很多段落。其中一些有文本和图像:
<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。