如何在每次单击按钮时将 "li" 元素从当前位置移动到第 n 个位置?
How to move a "li" element to nth position from current on each click of a button?
如何在每次单击按钮时将 "li" 元素从当前位置移动到第 n 个位置?
在下面的示例中,每次单击按钮时,我们必须在第一次单击时将第 3 li 移动到第 7(3+4) 位置,在第二次单击时移动到第 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>
这可能会有帮助
$(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>
如何在每次单击按钮时将 "li" 元素从当前位置移动到第 n 个位置?
在下面的示例中,每次单击按钮时,我们必须在第一次单击时将第 3 li 移动到第 7(3+4) 位置,在第二次单击时移动到第 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>
这可能会有帮助
$(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>