JQuery와 재주문 html 요소

Question

나는 5 개 HTML 요소

<a href="#"><img src="image1.jpg" /></a> 
<a href="#"><img src="image2.jpg" /></a> 
<a href="#"><img src="image3.jpg" /></a> 
<a href="#"><img src="image4.jpg" /></a> 
<a href="#"><img src="image5.jpg" /></a> 

나는 (아무 플러그인 가능한 경우) jQuery로이를 달성 할 수있는 방법

<a href="#"><img src="image5.jpg" /></a> 
<a href="#"><img src="image1.jpg" /></a> 
<a href="#"><img src="image2.jpg" /></a> 
<a href="#"><img src="image3.jpg" /></a> 
<a href="#"><img src="image4.jpg" /></a> 

에 순서를 변경 할 수 있습니다.

감사

Answer 1

내가 좋을 것 : 자신의 순서가되고에 대한 특정 기준에 관한 어떠한 정보와 함께, 그것은 특별히 유용한 솔루션을 제공하기 어렵다

$('img').last().parent().insertBefore($('img').first().parent()); 

하지만

.

위는 그러나 대신 a를 사용하는 (즉-분명히 대부분의/색인 번호를 표시 한 이후) 이미지 요소를 기반으로 요소 순서를 변경하려는 가정 :

$('a').last().insertBefore($(this).prevAll(':last')); 

Answer 2

당신을 가정하면 이 HTML이 :

<div id=parent> 
    <a href="#"><img src="image5.jpg" /></a> 
    <a href="#"><img src="image1.jpg" /></a> 
    <a href="#"><img src="image2.jpg" /></a> 
    <a href="#"><img src="image3.jpg" /></a> 
    <a href="#"><img src="image4.jpg" /></a> 
    </div> 

을 그리고 당신은 이미지의 src에 의해 주문하려면, 당신은이 작업을 수행 할 수 있습니다

function compareStrings(a,b) { 
    if (a>b) return 1; 
    else if (a<b) return -1; 
    return 0; 
} 
$('#parent').append($('a').detach().sort(function(a,b){ 
    return compareStrings($('img',a).attr('src'), $('img',b).attr('src')); 
})); 

블로그 게시물 : http://james.padolsey.com/javascript/sorting-elements-with-jquery/
소스 : http://github.com/padolsey/jQuery-Plugins/tree/master/sortElements/

예 : (블로그에서 부연)

<ul> 
    <li>Banana</li> 
    <li>Carrot</li> 
    <li>Apple</li> 
</ul> 

Demonstration

Answer 3

내가이 일을하는 코드 잘 (안 내) 발견 라이브러리를 포함하고 다음을 실행하십시오 :

$('li').sortElements(function(a, b){ 
    return $(a).text() > $(b).text() ? 1 : -1; 
}); 

결과는 :

<ul> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Carrot</li> 
</ul>