将元素从一个位置移动到另一个位置

Question

在一个容器中，我有四行。每个都有不同数量的列。每当我点击每一行时，它应移动到下一行。但是在单击最后一行（到达最终位置的任何行）时，它应该移动到第一行。

我在jQuery中尝试了insertAfter()方法但是我无法移动最后一行。请建议我移动最后一行的最佳方法。

我的页面中有当前设置：

$(".row").each(function() {
  $(this).insertAfter($(this).next());

Answer 1

您需要检查next()是否返回元素。如果没有，请使用第一个。像这样：

$(".row").each(function() {
  var $row = $(this);
  var $target = $row.next();
  if (!$target.length)
    $target = $row.siblings().first();

  $row.insertAfter($target);
});

您可以简化siblings().first()调用，但这取决于HTML的结构。