Question

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

我的div有一个特定的类，我想使用jquery来查找内容。具体来说，分配给我的css类的每个段落的第一个break标记将被用作标记，第一个中断之前的所有内容都被<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

您可以使用：

$('.matchingClass').each(function(){
    $(this).contents().first().wrap('<summary>');
    $(this).contents().wrapAll('<details>');
});

小提琴：http://jsfiddle.net/kkDFe/

Answer 2

DEMO： http://jsfiddle.net/RJktH/

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

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

Answer 3

最简单的解决方案可能是简单的字符串解析：

$('.matchingClass').each(function() {
    var html = $(this).html();
    var parts = html.split('<br>');
    var firstPart = parts.splice(0,1); // support multiple <br> elements
    html = '<details><summary>' + firstPart + '</summary><br>' + parts.join('<br>') + '</details>';
    $(this).html(html);
});

当然，理想的解决方案是更改服务器端代码以生成所需的标记，而不必使用javascript来搞乱它。

Answer 4

无论如何都不漂亮，但它有效：

var $p = $('.matchingClass')
var $details = $('<details />')

$p.contents().filter(function() {
    return this.nodeType == 3; // textNode
}).each(function(i, node) {
    i == 0 ? 
        $('<summary />', { text: node.nodeValue }).appendTo($details) :
        $details.append(node.nodeValue)
});

$p.empty().append($details);

Example fiddle

使用jquery在特定标记之前和之后向文本添加包装标记

4 个答案: