-3

每次单击按钮时，如何将“li”元素从当前位置移动到第 n 个位置？

在下面的示例中，每次单击按钮时，我们必须在第一次单击时将第 3 li 移动到第 7(3+4) 位置，在第 2 次单击时移动到第 11(7+4) 位置，到第 15(11+4) 位置第 3 次以此类推。

我附上了代码片段。它适用于首次点击。

$(document).ready(function(){

$("button").on('click', function(){
  $(".active").insertAfter("li:nth-child(7)");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>move</button>
    <ul>
    <li>1st list item</li>
    <li>2nd list item</li>
    <li class="active">3rd list item</li>
    <li>4th list item</li>
    <li>5th list item</li>
    <li>6th list item</li>
    <li>7th list item</li>
    <li>8th list item</li>
    <li>9th list item</li>
    <li>10th list item</li>
    <li>11th list item</li>
    <li>12th list item</li>
    </ul>

4

2 回答 2

1

这可能会有所帮助

$(document).ready(function(){
var cnt=3;
$("button").on('click', function(){
  cnt+=4;
  $(".active").insertAfter("li:nth-child("+cnt+")");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>move</button>
    <ul>
    <li>1st list item</li>
    <li>2nd list item</li>
    <li class="active">3rd list item</li>
    <li>4th list item</li>
    <li>5th list item</li>
    <li>6th list item</li>
    <li>7th list item</li>
    <li>8th list item</li>
    <li>9th list item</li>
    <li>10th list item</li>
    <li>11th list item</li>
    <li>12th list item</li>
    </ul>

于 2017-12-11T14:48:25.470 回答
1

试试这个，

$("button").on('click', function(){
  $(".active").nextAll('li').eq(3).after($('.active'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>move</button>
    <ul>
    <li>1st list item</li>
    <li>2nd list item</li>
    <li class="active">3rd list item</li>
    <li>4th list item</li>
    <li>5th list item</li>
    <li>6th list item</li>
    <li>7th list item</li>
    <li>8th list item</li>
    <li>9th list item</li>
    <li>10th list item</li>
    <li>11th list item</li>
    <li>12th list item</li>
    </ul>

于 2017-12-11T14:53:41.050 回答