jquery – 将每个元素包装在单独的ul列表中

我有mutli< a>元素包装成一个div,我想包装所有< a>标签到< 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

任何帮助,将不胜感激.

解决方法

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