Question

请帮帮我。我有：

<ul>
  <li>
    <h2>Headline for element 1</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 2</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 3</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 4</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 5</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
</ul>

这就是我想要做的事情：

每次点击列表项时，它都会移动到中心位置（第3个位置）并应用类＆＃34;活动＆＃34;。

我在jQuery中有这个：

jQuery(document).ready(function(){

var third = $("ul li:eq(1)");

$("ul li").click(function() {
$("ul li").removeClass("active"); //Remove any "active" class
$(this).insertAfter(third);
$(this).addClass("active"); //Add "active" class to selected tab
});
});

但它并不适用于第一和第二个元素。

Answer 1

“但它不适用于第一个和第二个元素。”

那是因为当你移动物品时，其他物品向上移动以填补空白。我建议您首先.detach()有问题的项目，然后计算剩余元素中的中间位置，然后重新插入已分离的项目。

另请注意您在此处创建的变量：

var third = $("ul li:eq(1)");

...将引用列表中的第二项，就像文档首次加载时一样。它不会自动更新以引用第二项当列表重新排序时。（另外，有一个名为third的变量引用第二个项是没有意义的。）您需要计算.click()处理程序中的中间位置：

jQuery(document).ready(function(){
  $("ul li").click(function() {
    $("li.active").removeClass("active"); //Remove any "active" class
    var $active = $(this).detach().addClass("active"),
        $lis = $("ul li");
    $active.insertBefore($lis.eq(Math.floor($lis.length / 2)));
  });
});

演示：http://jsbin.com/avupud/1/edit

Answer 2

尝试更改为$(this).insertAfter("ul li:eq(1)");

如何使用jquery将元素移动到第三个位置？

2 个答案: