Question

I have a group of fieldset elements within a form. I need to make them sortable. Most of the plug-ins are based on the idea of a sorting a list – so I’m trying to turn a set of

<fieldset>
  <input type="text" value="1" id="item_0_sort_1" name="item[0][sort]">
</fieldset>
<fieldset>
  <input type="text" value="1" id="item_0_sort_2" name="item[0][sort]">
</fieldset>
<fieldset>
  <input type="text" value="1" id="item_0_sort_3" name="item[0][sort]">
</fieldset>

into

<ul>
  <li>
    <fieldset>
      <input type = "text" value="1" id="item_0_sort_1" name="item[0][sort]">
    </fieldset>
  </li>
  <li>
    <fieldset>
      <input type = "text" value="2" id="item_0_sort_2" name="item[0][sort]">
    </fieldset>
  </li>
  <li>
    <fieldset>
      <input type = "text" value="3" id="item_0_sort_3" name="item[0][sort]">
    </fieldset>
  </li>
</ul>

(And no, this I can’t change the HTML 🙁 )

I can wrap the fieldsets no problem,

$('form').children('fieldset').wrap('<li>');

but can’t seem to see how to either move the fieldset elements into a <ul>? Right now I’m planning on using jquery.dragsort to move the items around, and have jQuery renumber the input.val()s accordingly – any suggestions for the callback would be greatly appreciated too.

Or am I going about it the right way? if there’s a way to sort the fieldsets directly, that would be better I suspect.

Answer 1

Use wrapAll:

$('form li').wrapAll("<ul/>");