Bọc từng phần tử trong danh sách ul riêng

Question

Tôi có phần tử mutli <a> được gói thành một div và tôi muốn bọc tất cả các thẻ <a> vào danh sách <ul>.

Diện mạo html như thế này:

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

Và tôi muốn có

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

Tôi đã thử với jquery nhưng tôi không thể làm điều đó

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

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

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

}); 

Dưới đây là một số fiddle

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Sử dụng wrapAll() và wrap() phương pháp

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

Hãy thử sử dụng wrap() và wrapInner() liên kết: 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>

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

Answer 3

Bạn có thể sử dụng wrapInner() để bọc nội dung của #MyId div trong ul và sau đó sử dụng wrap() để quấn mỗi a trong 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>