Как мне сделать наборы полей сортируемыми, обернув их в элементы списка с помощью jQuery

#jquery #html-lists #word-wrap

#jquery #html-списки #перенос слов

Вопрос:

У меня есть группа элементов набора полей внутри формы. Мне нужно сделать их сортируемыми. Большинство подключаемых модулей основаны на идее сортировки списка, поэтому я пытаюсь превратить набор

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

в

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

(И нет, я не могу изменить HTML :- ( )

Я могу обернуть наборы полей без проблем,

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

но, похоже, не вижу, как переместить элементы набора полей в <ul> ? Прямо сейчас я планирую использовать jquery.dragsort для перемещения элементов и соответствующим образом перенумеровать input.val() s в jQuery — любые предложения по обратному вызову также будут высоко оценены.

Или я поступаю правильно? я подозреваю, что если есть способ сортировать наборы полей напрямую, это было бы лучше.

Комментарии:

1. можете ли вы сказать мне, какой плагин вы используете для сортировки

Ответ №1:

Используйте wrapAll :

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

Ответ №2:

Я подготовил ДЕМОНСТРАЦИОННУЮ версию.

Вот разметка:

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

и jQuery:

 $('form >*').wrap('<li>');
$('form li').wrapAll('<ul>');
  

Комментарии:

1. … но мне нравится сайт jsFiddle! Спасибо roXon

2. @ Dycey —> Спасибо! Я не пытался скопировать ответ Эдгарда, просто чтобы все заработало! Я рад, что у вас это работает!! 1 Эдгару