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

Question

Is there a way to use Jquery's .unwrap() multiple times without copying and pasting? It'd be nice if it could accept an argument or something like: .unwrap(4) but it doesn't. Is there a more clever solution to achieving the following:?

 $(".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> 

Answer 1

Use parentsUntil
the child of foo ( .foo > * )
(which would be an ancestor of the element).

Use addBack to include the element itself.

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

Fiddle 1

---

If you want a generic function that unwraps an object n times, this does it:

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

Fiddle 2

Answer 2

You could always write your own:

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

fiddle

Obviously the name should be changed but the logic is sound.

Answer 3

Can use html()

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

That approach isn't scaleable for more than one though but can use html(fn) for multiple instances

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

Demo

Answer 4

Why overcomplicate it?

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

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

http://jsfiddle.net/k5mn0gnm/

Answer 5

For single foo elememt, try utilizing .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> 

---

For multiple .foo classes , try

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

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