2013-03-04 1 views
0

jQuery 플러그인 TinySort 링크의 href 속성에 따라 div를 정렬하려고합니다. 정렬 할 수있는 div ("상자")는 두 개의 별도 div ("row1"및 "row 2")에서 균등하게 나뉘며 두 div는 다른 div ("projects") 내에 있습니다. I.E., sortable div는 부모 요소에서 3 단계 아래로 내려갑니다.jQuery TinySort가 정렬을 위해 div를 선택할 수 없거나 다른 것이 정렬을 막을 수 없습니다.

#sortname 클릭

, 모든 .box가의 href 속성으로 내림차순으로 정렬합니다 :

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

내가이 의미 생각 :

내 함수는 간단한 클릭 이벤트 정렬하는 것입니다 링크가 포함되어 있습니다. 실제로는 클릭 할 때 아무 일도 일어나지 않습니다. 나는 여기서 명백한 무엇인가를 놓치고있는 것처럼 느낀다.

은 또한 어린이와 .box의 후손입니다 된 div를 선택

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

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

을했는데, 그 중 하나가 작동하지 않았다.

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> 

답변

1

이 당신이 다른 부모의 .box를 중첩했기 때문에 원하는 방식으로 정렬 할 것이다 (.row1 및 .row2). 정렬은 작동하지만 .box 노드는 항상 자신의 부모 노드 안에 있습니다. 그냥 그 부모 행을 생략하면 정렬하여 잘해야한다 :

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

당신은 어쨌든 셀에만 부모를 필요로하지 않습니다. 하나의 부모를 고정 폭으로 사용하고 nth-child를 사용하여 자식의 여백을 설정하십시오.

+0

tinysort v2는 기본적으로 다른 부모를 기준으로 정렬합니다 – Sjeiti