2

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

我的 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 就不会像我预期的那样结束。

有人可以帮忙吗？

4

4 回答 4

2

你可以使用这个：

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

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

于 2013-09-16T15:10:04.613 回答
2

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

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

$('.matchingClass').wrapInner('<details/>');
于 2013-09-16T15:10:04.830 回答
1

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

$('.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 来处理它。

于 2013-09-16T14:59:07.823 回答
0

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

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);

示例小提琴

于 2013-09-16T15:06:36.897 回答