Avvolgere ciascun elemento in un elenco ul separato

Question

Ho mutli <a> elemento avvolto in un div e mi piacerebbe inserire tutti i tag <a> in un elenco <ul>.

L'aspetto html come questo:

<div id='MyId'> 
<a href='#'><span>1</span></a> 
<a href='#'><span>2</span></a> 
<a href='#'><span>3</span></a> 
<a href='#'><span>4</span></a> 
<a href='#'><span>5</span></a> 
</div> 

E mi piacerebbe avere

<div id='MyId'> 
<ul> 
    <li> 
    <a href='#'><span>1</span></a> 
    </li> 
    <li> 
    <a href='#'><span>2</span></a> 
    </li> 
    <li> 
    <a href='#'><span>3</span></a> 
    </li> 
    <li> 
    <a href='#'><span>4</span></a> 
    </li> 
    <li> 
    <a href='#'><span>5</span></a> 
    </li> 
</ul> 
</div> 

ho provato con jQuery ma non sono in grado di farlo

$('#MyId').each(function(){ 
    var $this = $(this), 
     html = $this.html(), 
     skel = '<ul><li>'+ html +'</li></ul>'; 

    $this.closest('div').html(''); 

    $('#MyId').append(skel); 

}); 

Qui alcuni fiddle

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Utilizzare wrapAll() e wrap() metodi

$('#MyId a') 
 
    .wrapAll('<ul>') // wrap all elements by `ul` 
 
    .wrap('<li>'); // wrap each element by `li` 
 

 
console.log(
 
    $('#MyId').html() 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='MyId'> 
 
    <a href='#'><span>1</span></a> 
 
    <a href='#'><span>2</span></a> 
 
    <a href='#'><span>3</span></a> 
 
    <a href='#'><span>4</span></a> 
 
    <a href='#'><span>5</span></a> 
 
</div>

Answer 2

Provare a utilizzare wrap() e wrapInner() link: http://api.jquery.com/wrap/

$('#MyId > a').wrap('<li></li>'); 
 
// Wrap all a tag with <li></li> 
 
$('#MyId').wrapInner('<ul></ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='MyId'> 
 
    <a href='#'><span>1</span></a> 
 
    <a href='#'><span>2</span></a> 
 
    <a href='#'><span>3</span></a> 
 
    <a href='#'><span>4</span></a> 
 
    <a href='#'><span>5</span></a> 
 
</div>

violino: https://jsfiddle.net/5zh77tep/3/

Answer 3

È possibile utilizzare wrapInner() per avvolgere il contenuto di #MyId div in ul e quindi utilizzare wrap() per avvolgere ogni a in li

$('#MyId').wrapInner('<ul>') 
 
$('#MyId a').wrap('<li>');

li { display:block; list-style:none } 
 
li > a { display:block; margin:.5em 0 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='MyId'> 
 
    <a href='#'><span>1</span></a> 
 
    <a href='#'><span>2</span></a> 
 
    <a href='#'><span>3</span></a> 
 
    <a href='#'><span>4</span></a> 
 
    <a href='#'><span>5</span></a> 
 
</div>