Dans notre exemple, on cherche dans chaque <li> à déplacer l’élément <input /> dans l’élément <span class="checkbox-wrapper" />.
Code HTML de départ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form action=""> <ol> <li> <input type="checkbox" id=""> <label for=""></label> <span class="checkbox-wrapper"></span> </li> <li> <input type="checkbox" id=""> <label for=""></label> <span class="checkbox-wrapper"></span> </li> </ol> </form> |
Code HTML voulu :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form action=""> <ol> <li> <label for=""></label> <span class="checkbox-wrapper"> <input type="checkbox" id=""> </span> </li> <li> <label for=""></label> <span class="checkbox-wrapper"> <input type="checkbox" id=""> </span> </li> </ol> </form> |
Code jQuery nécessaire :
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('form ol li').each(function(){ jQuery(this).children('input[type="checkbox"]').prependTo(jQuery(this).children('.checkbox-wrapper')); }); }); </script> |