首先是FIDDLE。
这是我项目的一部分,HTML中的内容太多,所以我只展示结构:
<div class="line">
<table>
<tbody>
<tr>
<td>
<font face="Arial">
<p>
<!--content-->
<br>
<!--content-->
<br>
<!--content-->
<br>
<!--content-->
</p>
</font>
</td>
</tr>
</tbody>
</table>
</div>
这部分是我应该处理的内容。我应该做的是根据<br>
将此表拆分为多个表,并保留原始样式。也就是说,每个段落应该在不同的表格中独立。
下面的代码显示了我之前使用<p>
拆分内容的解决方案。所以你应该已经知道了我的意图。
function split_func($div) {
var $rows = $div.find("table tr td p"); // fail to detect tr in this demo
n = $rows.length;
$rows.each(function(i) {
var $clone = $div.clone(true, true).insertAfter($div);
$clone.find("table tr td p").each(function(j) {
if(i !== (n-j-1)) $(this).remove();
});
});
$div.remove();
}
带注释的行是我应该组织提取功能的地方。你能告诉我如何解决这个问题吗?谢谢!
答案 0 :(得分:0)
上面的代码示例未能在您尝试查找的元素层次结构中指定tbody元素:
此外,我不建议使用$符号为变量添加前缀,因为在使用jQuery库时这应该被视为保留字符。
var line_w = $(".line");
for(var i = 0 ;i<line_w.length;i++){
if(line_w[i].getElementsByTagName('p').length){
$(line_w[i]).each(function(i, div) {
split_func($(div));
});
}
}
function split_func(div) {
var rows = div.find("table tbody tr td p"); // fail to detect tr in this demo
n = rows.length;
rows.each(function(i) {
var clone = div.clone(true, true).insertAfter(div);
clone.find("table tbody tr td p").each(function(j) {
if(i !== (n-j-1)) $(this).remove();
});
});
div.remove();
}
答案 1 :(得分:0)
这样您就可以将每个段落拆分为自己的表格:
$('.line p').each(function(){
var paragraphs = $(this).html().split('<br>');
for(var i=0;i<paragraphs.length;i++){
if(paragraphs[i]!= '') {
$(this).closest('table').clone().appendTo($(this).closest('.line')).find('p').html(paragraphs[i]);
}
}
});
$('.line table:first').remove();
<强> jsFiddle here
答案 2 :(得分:0)
你的意思是这样的?简单的方法,DEMO http://jsfiddle.net/yeyene/Rzz2n/8/
var output = $('.line p.Default').html();
output = output.replace(/\<br><br>/g, '</p></font></td></tr></tbody></table><table><tbody><tr><td><font face="Arial"><p>');
$('.line').html('<table><tbody><tr><td><font face="Arial"><p>'+output);