ul 내에서 주어진 클래스로 li 요소의 위치를 ​​변경 하시겠습니까?

Question

나는 여러개의 요소가있는 ul을 가지고 있는데, 그 중 하나는 항상 "활성"클래스입니다. li.active 요소를 항상 목록 맨 위에 표시하려면 어떻게합니까?

이 목록을 생성하는 HTML 출력을 제어 할 수 없으므로 CSS (선호) 또는 javascript/jquery로이 작업을 수행해야합니다. CSS를 사용하여이 작업을 수행 할 방법이없는 것 같지만 일종의 position-in-list 속성을 사용하는 것이 좋습니다.

고맙습니다.

Answer 1

하면 (그리고 나는 당신이 생각) 실제 순서는 짐작할 수 있듯이 CSS만으로는 불가능합니다. 이 게시물의 제목을 'jquery'로 지정하면 해당 라이브러리의 선택자 등에 대해 알게 될 것입니다. 반드시 (a) 클래스가 "활성"인 li 요소를 선택한 다음 (b) 해당 항목을 순서가없는 목록의 맨 위에 삽입해야합니다. 이것은 jQuery에서 완벽하게 수행 할 수 있습니다. 다음은 그 일의 (매우) 간단한 방법이있다 :

$('ul').prepend($('.active')); 

이 모든 클래스 '활성'과 페이지의 첫 번째 요소를 잡아이며, 첫 번째 순서가없는 목록에 앞에 추가 않습니다. 이것은 아마도 당신의 필요에 너무 단순 할 것이지만, 더 견고한 솔루션을 찾는데 도움이되기를 바랍니다.

Answer 2

우리는 목록 항목의 높이가 일정하게 될 것입니다 가정 (그것은 꽤 큰 가정이다) 경우 : 당신이 목록 항목의를 조작해야

ul { 
    position: relative; 
    padding-top: 2em; 
} 

li { 
    height: 2em; 
} 

li.active { 
    position: absolute; 
    top: 0; 
    left: 0; 
}