如何使用jquery交换链接的位置

Question

如何使用jquery交换链接的位置。

导航下方的

将是每个标签的内容div。所选链接将始终位于第一个“sixrevision”链接旁边。

代码将是这样的

   <ul id="crumbs">
   <li><a href="#" class="selected">Home</a></li>
   <li><a href="#">product 1</a></li>
   <li><a href="#">product 1</a></li>
   <li><a href="#">product 1</a></li>   
   /ul>

它将是一个ajax标签系统，但只有标签看起来像痕迹。我想知道如何将“选定”项目始终保留在第一项的下一个项目中。

Answer 1

您可.prependTo() .selected将其移至第一个孩子，如下所示：

$("#crumbs .selected").prependTo("#crumbs");

Answer 2

我会采用稍微不同的方法，下面概述并在JSFiddle进行演示（尝试点击示例中的链接）

这样做的好处是可以通过纯CSS启动更改。如果您正在进行服务器端更改，则无需更改HTML或应用javascript。从长远来看，我个人认为这更清洁，更容易管理。

注意：我稍微改变了HTML，让包含 li 元素的方式成为'selected'类，而不是 a 元素。我发现将“selected”和“active”类应用于包含元素（与click元素相对）可以提供更大的灵活性。

<强> HTML

 <ul id="crumbs">
   <li><a href="#">XHTML</a></li>
   <li class="selected"><a href="#">Javascript</a></li>
   <li><a href="#">Flash</a></li>
   <li><a href="#">SEO</a></li>   
</ul>

<强> JS

$(function(){
    $('ul#crumbs li a').bind('click',crumbClick)
});

function crumbClick(){
    $('ul#crumbs .selected').removeClass('selected');
    $(this).parents('li').addClass('selected');
    return false;
}

CSS [例如]

/* RESET */
ul#crumbs, ul#crumbs li { margin:0;padding:0;}

ul#crumbs li a {display:inline-block;padding:3px 4px;}

ul#crumbs li {list-style:none;display:inline;}

ul#crumbs li.selected {float:left;}