Как реализовать сортировку блоков с сохранением в input?

Question

[Collaboration]

Хочу поменять позицию блоков с сохранением позиции в input. Почти получилось, но немного не то.

Скрипт:

$(document).ready(function(){
    $(".up").click(function(){
        var pdiv = $(this).parent('div');
        pdiv.insertBefore(pdiv.prev());
	$(this).parent('div').children('.input0').val($(this).parent().index());
        return false
    });
    $(".down").click(function(){
        var pdiv = $(this).parent('div');
        pdiv.insertAfter(pdiv.next());
	$(this).parent('div').children('.input0').val($(this).parent().index());
        return false
    });
  });

Код

<div>
  <div class="b1">
    Блок 1
    <input class="input0" type="text" value=""></input>
    <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
    <div>111</div>
  </div>
  <div class="b1">
    Блок 2
    <input class="input0" type="text" value=""></input>
    <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
    <div>222</div>
  </div>
  <div class="b1">
    Блок 3
    <input class="input0" type="text" value=""></input>
    <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
    <div>333</div>
  </div>
  <div class="b1">
    Блок 4
    <input class="input0" type="text" value=""></input>
    <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
    <div>444</div>
  </div>
  <div class="b1">
    Блок 5
    <input class="input0" type="text" value=""></input>
    <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
    <div>555</div>
  </div>
</div>

В целом работает, но сейчас фиксируется позиция блока позиция которого изменена. Я полагаю, что нужно изменять не input0 активного блока, а фиксировать позицию всех блоков в соотвествующие input. Решение на поверхности, но сообразить не могу.

Comments

[Сергей Сергей]

document.querySelectorAll( '.b1' ).forEach( (d,i) => d.querySelector('input').value = i )

Answer 1

[Антон Шаманов]

$(".up").click(function(){
  var current = $(this).parents('.b1');
  current.prev().before(current);
});
$(".down").click(function(){
  var current = $(this).parents('.b1');
  current.next().after(current);
});

либо использовать replacewith()

Comments

[Collaboration]

Спасибо большое, сейчас проверю этот вариант. На данный момент я пришёл к следующему:

$(document).ready(function() {
  $(".up").click(function() {
    var pdiv = $(this).parent('.b1');
    pdiv.insertBefore(pdiv.prev());
    $('.b1').each(function() {
      $(this).find('.input0').val($(this).index());
      $(this).removeClass('order-0 order-1 order-2 order-3 order-4');
      $(this).addClass('order-' + $(this).index());
    });
    return false;
  });

  $(".down").click(function() {
    var pdiv = $(this).parent('.b1');
    pdiv.insertAfter(pdiv.next());
    $('.b1').each(function() {
      $(this).find('.input0').val($(this).index());
      $(this).removeClass('order-0 order-1 order-2 order-3 order-4');
      $(this).addClass('order-' + $(this).index());
    });
    return false;
  });
});

Отлично работает, но есть некоторые нюансы:

1 - отсчёт начинается с 0 и у меня появляется странный класс order-0
2 - чтобы удалять классы, которы образовались в результате первого клика, мне пришлось перечислить их все. Это, наверно, не очень экологично ))

[Антон Шаманов]

Collaboration, зачем вообще менять класс? если хочешь хранить данные в элементе, используй метод data()

[Антон Шаманов]

Collaboration, у тебя получился какой-то говнокод - код дублируется, $(this) дублируется. $('.b1').each() обходит все элементы у которых есть класс b1 и не факт что это твои блоки т.ч. либо задавай имена классов в стиле BЭМ или ищи на основании текущего элемента $(this).parent('.b1').parent().find('.b1')

[Антон Шаманов]

прочти руководство к jQuery перед тем как что-то делать большинство из сказанного мной там описано в примерах.
Вместо $(...).click(function() { используй $(...).on('click', function(event) { единый стиль облегчает чтение кода и отлавливание ошибок в событиях
return false; блокирует все последующие обработчики события т.ч. лучше использовать event.preventDefault(); чтобы отключить стандартное поведение элемента т.е. не работал как ссылка.

[Collaboration]

Антон Шаманов, да, действительно, у меня недостаточно знаний в jQuery. Пойду мат часть изучать. Спасибо за подсказки.