Nest chaque élément HTML dans différents blocs html

Question

J'ai une grande forme produit qui ressemble à ceci, avec l'étiquette label sur côté les UL LI tags

<label for="title">Title:</label> 
<ul class="formItem"> 
    <li> 
    <input type="text" value=""> 
    </li> 
</ul> 

<label for="title">First Name:</label> 
<ul class="formItem"> 
    <li> 
    <input type="text" value=""> 
    </li> 
</ul> 

Voulez-tag nid label à l'intérieur du UL LI en utilisant jQuery et faire la forme se présentent comme suit

<ul class="formItem"> 
    <li> 
    <label for="title">Title:</label> 
    <input type="text" value=""> 
    </li> 
</ul> 

<ul class="formItem"> 
    <li> 
    <label for="title">First Name:</label> 
    <input type="text" value=""> 
    </li> 
</ul> 

J'ai essayé, mais cela devient chaque balise Label sur la forme et des bâtons dans la première li, j'ai besoin chaque étiquette imbriqué dans le li directement après

(function($) { 
jQuery(".formItem li").append(jQuery("#my-form label")); 
})(jQuery); 

Answer 1

$('ul.formItem').each(function() { 
    $(this).find('li').prepend($(this).prev('label')); 
}); 

jsFiddle example

Answer 2

Vous devrez utiliser une boucle each:

$('#my-form label').each(function(index) { 
    $('.formItem li').eq(index).prepend(this); 
});