如何用display：none标签包装类？

Question

我设置了一段代码，以便每次用户点击某些div时，都会添加displaynone类（这些div已经有了CSS的类名）：

 $(".header").click(function () {
            $(this).addClass('displaynone');
        });

我的页面底部有一个调用此功能的按钮

function export(){
            var fullhtml = $("#mybody").html();  }

如何调用.wrap()以便它在每个div类名称中搜索“displaynone”，然后将其包装为类似

的内容

<div style="display:none"></div>

我这样做是因为我需要向dompdf发送一个表单，用户可以动态点击标题来“隐藏”PDF文档，但标题仍然需要出现在HTML版本上（因此我可以不要只使用.css ('display', 'none')）。

Answer 1

$('.displaynone').wrap('<div style="display:none;"></div>');

Answer 2

假设你有一个像这样的HTML字符串：

var html = '<div><div class="displaynone"></div><div>pancakes</div><div class="displaynone"></div></div>';

然后你可以这样做来包装.displaynone元素并将其附加到#pancakes：

var $html = $(html);
$html.find('.displaynone').wrap('<div style="display: none;">');
$('#pancakes').append($html);

如果您的HTML没有方便地包装在<div>中，那么您可以添加一个并使用html打开它：

var html = '<div>' + incoming_html + '</div>';
// as above
$('#pancakes').append($html.html());

或使用unwrap打开额外的<div>：

var html = '<div>' + incoming_html + '</div>';
// as above
$('#pancakes').append($html.unwrap());

有用的参考资料：

• find
• html
• unwrap
• wrap