Question

有没有办法多次使用Jquery .unwrap()而无需复制和粘贴？如果它可以接受一个论点或类似的东西，那就很好了：.unwrap(4)但它并没有。是否有更聪明的解决方案来实现以下目标：？

＆＃13;

$(".foo a").unwrap().unwrap().unwrap().unwrap();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 1</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 2</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link 3</a>
                </div>
            </li>
        </ul>
    </div>
</li>
</ul>

＆＃13;

Answer 1

使用 parentsUntil
foo的孩子（.foo > *）
（这将是元素的祖先）。

使用addBack包含元素本身。

$('.foo a').parentsUntil('.foo > *').addBack().unwrap();

Fiddle 1

<小时/> 如果你想要一个解包对象n次的泛型函数，就可以这样做：

$.fn.unwrapN = function(n) {
  while(n--) $(this).unwrap();
  return $(this);
}

Fiddle 2

Answer 2

你总是可以写自己的：

$.fn.unwrapTimes = function(times){
    var unwrapCount = times;
    return this.each(function(){
        var $this = $(this);
        for(var i=0;i<unwrapCount;i++){
             $this.unwrap();   
        }
    });
};

fiddle

显然名称应该改变，但逻辑是合理的。

Answer 3

可以使用html（）

$('.foo').html($('.foo a'));

该方法不可扩展至多个，但可以将html(fn)用于多个实例

$('.foo').html(function(){
   return $(this).find('a')
});

<强> Demo

Answer 4

为什么要过度复杂化？

var $wrapper = $('li.foo'),
    $keep = $wrapper.find('a'),
    $result = $wrapper.empty().append($keep);

console.log($result[0].outerHTML);

http://jsfiddle.net/k5mn0gnm/

Answer 5

对于单foo元素，请尝试使用.prependTo()，.empty()

 $(".foo a").prependTo($(".foo").empty());

$(".foo a").prependTo($(".foo").empty());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link</a>
                </div>
            </li>
        </ul>
    </div>
</li>

对于多个.foo班级，请尝试

$(".foo a").each(function() {
  $(this).prependTo($(this).parents(".foo").empty());
});

http://jsfiddle.net/pu7Lmxfr/5/

你怎么.unwrap（）一个元素多次？

5 个答案: