Отсоединить, отсортировать и снова прикрепить в исходное положение - PullRequest
Новая
       60

Отсоединить, отсортировать и снова прикрепить в исходное положение

0 голосов
/ 29 октября 2018

У меня есть следующий HTML: 

<div id="01" class="visible" data-owner="b"></div>
<div id="02" class="notvisible" data-owner="c"></div>
<div id="03" class="visible" data-owner="x"></div>
<div id="06" class="notvisible" data-owner="a"></div>
<div id="08" class="notvisible" data-owner="b"></div>

Я хочу сгруппировать и отфильтровать видимые строки в группы владельцев: 

<div class="group" data-user-group="x">
  <div id="03" class="visible" data-owner="x"></div>
</div>
<div class="group" data-user-group="b">
  <div id="01" class="visible" data-owner="b"></div>
</div>

Код jQuery для этого прекрасно работает: 

function groupTheVisible() {
  $('div.group').each(function() {
    dataAnchor = $(this).attr('data-user-group');
    $('div.visible[data-owner="' + dataAnchor + '"]').detach().prependTo($(this));
  }  
}

function regroupTheVisible() {
  // ?
}

Как я могу сгруппировать видимые строки обратно в правильную позицию в исходном списке? Заранее спасибо!

1 Ответ

0 голосов
/ 29 октября 2018

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

Итак, я возьму контейнер div с id "корзиной".

Фрагмент ниже также содержит некоторый текст в элементах div, так что вывод показывает, что происходит. 

function groupTheVisible() {
    $("div.group").each(function() {
        var dataAnchor = $(this).attr("data-user-group");
        $('div.visible[data-owner="' + dataAnchor + '"]').prependTo(this);
    });
}

function regroupTheVisible() {
    $("div.group > div").each(function() {
        var dataId = $(this).attr("id");
        var $before = $("#basket > div").filter(function() {
            return $(this).attr("id") < dataId;
        });
        if ($before.length) {
            $before.last().after(this);
        } else {
            $("#basket").prepend(this);
        }
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="basket">
    <div id="01" class="visible" data-owner="b">01-B-Visible</div>
    <div id="02" class="notvisible" data-owner="c">02-C-NotVisible</div>
    <div id="03" class="visible" data-owner="x">03-X-Visible</div>
    <div id="06" class="notvisible" data-owner="a">06-A-NotVisible</div>
    <div id="08" class="notvisible" data-owner="b">08-B-NotVisible</div>
</div>

<hr>

<div class="group" data-user-group="x"></div>
<div class="group" data-user-group="b"></div>

<button onclick="groupTheVisible()">Group the Visible</button>
<button onclick="regroupTheVisible()">Regroup the Visible</button>

NB. Обязательно объявляйте переменные с помощью var (или let, const), чтобы они не стали глобальными переменными.

NB2: когда вы перемещаете элементы, на самом деле нет необходимости вызывать detach для них.

...