Question

我试图让jQuery插件TinySort按其链接的href属性对div进行排序。我想要排序的div（＆＃34; box＆＃34;）在两个独立的div中均匀分配（＆＃34; row1＆＃34;＆＃34; row 2＆＃34;）这两个div在另一个div中（＆＃34;项目＆＃34）。 I.E.，可排序的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"});

选择作为子项的div和.box的后代，但那些也没有用。

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>

Answer 1

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

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

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

的边距

jQuery TinySort无法选择div来对它们进行排序，或者其他东西阻止排序

1 个答案: