0

jQuery プラグインTinySortで divをリンクの href 属性で並べ替えようとしています。ソート可能にしたい div (「ボックス」) は、2 つの別個の div (「row1」と「row 2」) 内で均等に分割され、これら 2 つの div は別の div (「プロジェクト」) 内にあります。IE、ソート可能な div は親要素から 3 レベル下にあります。

私の機能は、ソートするための単純なクリックイベントです:

$("#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

異なる親 (.row1 と .row2) で .box をネストしたため、これは思いどおりに並べ替えられません。並べ替えは機能しますが、.box ノードは常に親ノード内にとどまります。これらの親行を除外するだけで、並べ替えで問題ないはずです。

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

とにかく、.row の親は必要ありません。固定幅の 1 つの親を使用し、nth-child を使用して子 .box の余白を設定します。

于 2013-03-25T09:29:59.853 に答える