jquery - 使用 jquery 将换行标签添加到特定标签之前和之后的文本

Question

我正在尝试在包含段落和中断标记的重复 html block 上创建详细信息和摘要标记结构。

我的 div 有一个特定的类，我想使用 jquery 来查找内容。具体来说，分配给我的 css 类的每个段落的第一个中断标记将用作标记，第一个中断之前的所有内容都被 <summary></summary> 包裹。标签以及整个匹配段落中的所有内容都用标签对进行内部包装。

所以举一个前后html的例子。更改之前它看起来像这样......

<p class="matchingClass">
this should be in a summary<br>this would be within the expandable details tag
</p>

最终结果应该是......

<p class="matchingClass"><details><summary>
this should be in a summary</summary><br>this would be within the expandable details tag
</details></p>

我以为我可以使用以下代码来完成此操作....

$(".matchingClass").each(function() {
     $(this).prepend("<details><summary>");
     $(this).find("br").first().before().prepend("</summary>");
     $(this).append("</details>");  
});

但我现在意识到 jquery/javascript 总是自动插入结束标签。因此，一旦我应用的 3 个命令中的第一个运行，html 就不会按照我的预期结束。

有人可以帮忙吗？

Answer 1

演示: http://jsfiddle.net/RJktH/

$('.matchingClass').each(function () {
    var t = $(this).html();
    $(this).html('<summary>' + t.replace('<br>', '</summary>'));
});

$('.matchingClass').wrapInner('<details/>');