Оберните каждый элемент в отдельный список ul

Question

У меня есть mutli <a> элемент, обернутый в один div, и я хотел бы обернуть все теги в список <ul>.

HTML, выглядеть следующим образом:

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

И я хотел бы иметь

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

Я попытался с JQuery, но я не в состоянии сделать это

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

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

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

}); 

Здесь некоторые fiddle

Любая помощь будет оценена по достоинству.

Answer 1

Использование wrapAll() и wrap() методы

$('#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

Попробуйте использовать wrap() и wrapInner() ссылка: 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>

скрипку: https://jsfiddle.net/5zh77tep/3/

Answer 3

Вы можете использовать wrapInner() обернуть содержание #MyId DIV в ul, а затем использовать wrap() обернуть каждый a в 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>