jquery - 将可见项移动到索引的开头(move visible items to beginning of index)

Question

I have a list of elements which are positioned absolutely across an image.

(我有一个绝对位于图像上的元素列表。)

I created a filter to hide/show elements, which is working, but I want to move the shown items to be the first children in the container, otherwise there would just be empty spaces when the previous items have "disappeared" when the filter was activated.

(我创建了一个过滤器来隐藏/显示正在运行的元素，但是我想将显示的项移动到容器中的第一个子项，否则当过滤器处于活动状态时，如果先前的项“消失”，将只有空白活性。)

If I would be able to do that, I could use CSS to define the absolute position according to :first-of-type, :nth-of-type(2) etc - so that always the first children are positioned where I want them.

(如果我能够做到这一点，我可以使用CSS根据：first-of-type，：nth-??of-type（2）等定义绝对位置-以便始终将第一个子代放置在我想要的位置。)

The code is:

(代码是：)

$(".trigger-filter").click(function() {
  var filterData = $(this).attr("data-filter");
  if (filterData == "all") {
    $(".team").show("2000");
  } else {
    $(".team").not("." + filterData).hide("2000");
    $(".team").filter("." + filterData).show("2000");
  }
});

Any ideas how to get this done?

(有什么想法如何做到这一点？)

  ask by Ido Angel-Bohadana translate from so

Answer 1

Your absolute position properties are left and top .

(您的绝对位置属性为left和top 。)

So, you will know what the smallest possible value is for top and left .

(因此，您将知道top和left的最小可能值是多少。)

Define a topInitial , leftInitial , topOffset and a leftOffset variable which will contain the initial values and the difference between top and left of two subsequent elements to be displayed.

(定义topInitial ， leftInitial ， topOffset和leftOffset变量，这些变量将包含初始值以及要显示的两个后续元素的top和left之间的差。)

Now, let's assume that you have a visibleElements variable holding the elements to be displayed.

(现在，假设您有一个visibleElements变量，其中包含要显示的元素。)

In this case, you can use this algorithm:

(在这种情况下，您可以使用以下算法：)

var currentTop = initialTop;
var currentLeft = initialLeft;
var current
for (var visibleElement of visibleElements) {
    visibleElement.css('left', currentLeft + 'px').css('top', currentTop + 'px');
    currentLeft += leftOffset;
    currentTop += topOffset;
}