अलग-अलग उल सूची में प्रत्येक तत्व को लपेटें

Question

मेरे पास एक div में लिपटे mutli <a> तत्व है और मैं सभी <a> टैग को <ul> सूची में लपेटना चाहता हूं।

इस तरह एचटीएमएल देखो:

<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() उपयोग कर सकते हैं ul में #MyId div की सामग्री लपेट और फिर 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>