1

请在这件事上给予我帮助。我有：

<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 位）并应用“活动”类。

我在 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
});
});

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

4

2 回答 2

3

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

那是因为当您移动项目时，其他项目会向上移动以填补空白。我建议您首先.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

于 2013-02-23T04:17:04.027 回答
0

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

于 2013-02-23T04:16:17.103 回答