如何将" li"元素移至第n个位置。
在下面的示例中,每次点击按钮,我们必须将第三li移至第1次单击第7(3 4)位置,到第2个单击第11(7 4)位置,到15th(11 )4)在第三等。
我已经附加了代码段。它正在首次单击。
$(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>
这可能有用
$(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>
尝试这个,
$("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>