Question

我有HTML数据。

原始HTML数据：

<div id="holder">
    <div class="box">
        <span class="conf"><a href="" class="remove">Remove</a></span>
        <div class="view">
            <div class="demoContainer container-fluid">
                <div class="box">
                    <span class="conf"><a href="" class="remove">Remove</a></span>
                    <div class="view">
                        <div class="insideContainer container">
                            <div class="demoRow">
                                    <span class="conf"><a href="" class="remove">Remove</a></span>
                                    <div class="view">
                                        <div class="row">
                                            <div class="column">
                                                <span class="conf"><a href="" class="remove">Remove</a></span>
                                                <div class="view">
                                                    <div class="col-md-6">Content</div>
                                                    <div class="col-md-6">Content</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    ....
</div>

我需要这样的格式：

<div id="holder">
    <div class="demoContainer container-fluid">
        <div class="row">
            <div class="col-md-6">Content</div>
            <div class="col-md-6">Content</div>
        </div>
    </div>
</div>

我尝试使用jquery的unwrap和detach方法，但不是解决方法。如何将不需要的标签剥离为原始html数据？（.box，.conf，.view等）

JSFIDDLE

Answer 1

我相信你需要这样的东西：

$(function() {
  $("span.conf").remove()
  $(".box, .view, .conf").contents().unwrap();
})

Answer 2

鉴于有很多要遍历和修改的元素，你可能最好将.col-md-6元素从该结构中复制出来并围绕它们建立自己的父母，如下所示：

var $holder = $('#holder');
var $content = $holder.find('.col-md-6');
$holder.empty().append($content);
$content.wrapAll('<div class="demoContainer container-fluid"><div class="row"></div></div>');

Example fiddle

或者，假设您要复制每个.box元素的简化HTML结构，您只需要遍历它们：

var $holder = $('#holder');
$holder.find('.box').each(function() {
    var $content = $(this).find('.col-md-6');
    $holder.append($content);
    $content.wrapAll('<div class="demoContainer container-fluid"><div class="row"></div></div>');
});
$holder.find('.box').remove();

Example fiddle

Jquery剥离不需要的标签

2 个答案: