0

我正在尝试让 jQuery 插件TinySort按链接的 href 属性对 div 进行排序。我想要可排序的 div（“box”）在两个单独的 div（“row1”和“row 2”）中均匀划分，这两个 div 在另一个 div（“项目”）中。IE，可排序的 div 从父元素向下三层。

我的功能是一个简单的点击事件来排序：

$("#sortname").click(function(){
$(".box").tsort("a",{order:"desc",attr:"href"});
});

我认为这意味着：

单击#sortname 时，所有.box 将按其中包含的链接的href 属性降序排序。实际上，单击它时没有任何反应。我觉得我在这里遗漏了一些明显的东西。

我也试过

$(".box > div").tsort("a",{order:"desc",attr:"href"});

和

$(".box div").tsort("a",{order:"desc",attr:"href"});

选择 .box 的子项和后代 div，但这些也不起作用。

HTML：

<h1 id="sortname">Sort By Name</h1>
<div id="projects">
<div class="row1">   
<div class="box">  
<a href="project1.htm"><img class="project1" src="project1"/></a>   
<div class="caption"><a href="project1.htm">Project 1</a></div>
</div>

<div class="box">  
<a href="project2.htm"><img class="project2" src="project2"/></a>   
<div class="caption"><a href="project2.htm">Project 2</a></div>
</div>

<div class="box">  
<a href="project3.htm"><img class="project3" src="project3"/></a>   
<div class="caption"><a href="project3.htm">Project 3</a></div>
</div>
</div>

<div class="row2">     
<div class="box">  
<a href="project4.htm"><img class="project4" src="project4"/></a>   
<div class="caption"><a href="project4.htm">Project 4</a></div>
</div>

<div class="box">  
<a href="project5.htm"><img class="project5" src="project5"/></a>   
<div class="caption"><a href="project5.htm">Project 5</a></div>
</div>

<div class="box">  
<a href="project6.htm"><img class="project6" src="project6"/></a>   
<div class="caption"><a href="project6.htm">Project 6</a></div>
</div>
</div>
</div>
4

1 回答 1

1

这不会按照您想要的方式排序，因为您已将 .box 嵌套在不同的父项（.row1 和 .row2）中。排序将起作用，但 .box 节点将始终留在其父节点内。只需省略那些父行，您应该可以通过排序来处理：

$('.box').tsort('a',{attr:'href'});

无论如何，您将不需要 .row 父母。使用一个具有固定宽度的父级并使用 nth-child 设置子级 .box 的边距

于 2013-03-25T09:29:59.853 回答