Как вы .unwrap() элемент несколько раз?

Есть ли способ использовать JQuery .unwrap() несколько раз без копирования и вставки? Было бы неплохо, если бы он мог принять аргумент или что-то вроде: .unwrap(4), но это не так. Есть ли более умное решение для достижения следующего:?

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

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

Ответы

Ответ 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

Ответ 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

Очевидно, имя должно быть изменено, но логика звучит.

Ответ 3

Может использовать html()

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

Этот подход не масштабируется для нескольких, но может использовать html(fn) для нескольких экземпляров

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

Демо

Ответ 4

Зачем его компрометировать?

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

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

http://jsfiddle.net/k5mn0gnm/

Ответ 5

Для одиночной foo elememt попробуйте использовать .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>