Question

这就是HTML代码的样子。我需要删除br标签并将段落标记（即带有日期的行）换行。每个日期都应包含在自己的段落标记中。

<html>
<head><script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<h2>Other Events</h2>                       
<p>
<strong>Venue name</strong>
</p>
<div class="details">
<p>
Wednesday, May 11, 2011 <br>
Wednesday, June 08, 2011 <br>
Wednesday, July 13, 2011 <br>
Wednesday, August 10, 2011 <br>
Wednesday, September 14, 2011 <br>
Wednesday, October 12, 2011 <br>
Wednesday, November 09, 2011 <br>
19.00
<br>
</p>
</div>

</body>
</html>

我尝试了在Google上搜索后找到的这个jQuery代码块，但它根本不起作用：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').html($('body').html().replace(/<br>\*/g,"</p><p>"));
});

我也尝试过这段代码，但不是在段落标记中包含日期，而是在每行的末尾添加空段落标记：

$(document).ready(function(){
$('.details p br').replaceWith('<p></p>');
});

这是HTML输出的外观。正如您所看到的那样，它没有正确地用p标签包裹日期行：

<div class="details">
<p>
Wednesday, May 11, 2011 <p></p>
Wednesday, June 08, 2011 <p></p>
Wednesday, July 13, 2011 <p></p>
Wednesday, August 10, 2011 <p></p>
Wednesday, September 14, 2011 <p></p>
Wednesday, October 12, 2011 <p></p>
Wednesday, November 09, 2011 <p></p>
19.00
<p></p>
</p>
</div>

有没有人知道解决这个问题？

Answer 1

修改：通过以这种方式使用<p>代码来运行整个目的，您应该尝试删除<br>代码并放置<p>元素内的文字，效果相同，但语义正确。

编辑2：我认为你想以上述方式想要它，只需阅读你的问题，我认为我有问题！

var $p = $('.details p');
$p.contents()
  .filter(function() { return this.nodeType == 3; }) // Select all textnodes
  .wrap('<p>') // Place them inside paragraph elements

$('br', $p).remove(); // Remove all break elements

工作小提琴： http://jsfiddle.net/garreh/UWDw5/1/

如何用<p>和</p>标签去掉<br/>标签和换行？

1 个答案: