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个“篮子”。

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

分离，分类并重新固定在原始位置

1 个答案: