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

Question

In a container I have four rows. Each with a different number of columns. Whenever I click on each row it should move to its next row. However on clicking the final row (any row which comes to the final position) it should move to the first row.

I tried the insertAfter() method in jQuery but I was not able to move the final row. Please suggest me best way to move the final row.

I have the current setup in my page:

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

Answer 1

You need to check if next() returns an element. If it doesn't, use the first. Something like this:

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

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

It's possible you can simplify the siblings().first() call, but that would depend on how your HTML is structured.