在原始位置分离、排序和重新连接

Question

我有以下 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() {
  // ?
}

如何将可见行分组回到原始列表中的正确位置？提前致谢！

Answer 1

如果您的第一个列表位于一个容器中会更容易，因为在极端情况下该列表可能会变空，然后脚本需要知道在哪里再次创建它。

因此，我假设容器 div 具有 id "basket"。

下面的代码片段在 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>

注意：确保使用 var（或 let、const）声明变量以避免它们成为全局变量。

NB2：当您移动元素时，实际上没有必要对它们调用 detach。

在原始位置分离、排序和重新连接

Detach, sort and reattach at the original position

jquery

sorting

append

clone

detach