將每個元素包裝在單獨的ul列表中

Question

我將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);

});

這里有些小提琴

任何幫助，將不勝感激。

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 ： wrapInner()

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