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

});

这里有一些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中包含ul div的内容，然后使用wrap()将每个a打包在li < / p>

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

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

3 个答案: