jquery를 사용하여 요소 정렬하기

Question

div와 같은 사용자와 관련된 요소가 포함 된 div가 #containerDiv 인 div가 있습니다. 성, 이름 등 값에 따라 컨테이너 div의 내용을 정렬해야합니다.

구글을 검색 할 때 내가 가진 모든 예제는 정렬 된 결과를 추가하고 표시되는 전체 HTML을 변경하지 않습니다. 또한 특정 필드 (성, 이름)별로 정렬되지 않습니다.

특정 필드를 기반으로 전체 내용을 정렬하고 표시하는 데 도움이되도록 #containerDiv을 보내주십시오. 내가 생각

<div id="containerDiv"> 
    <div id="lName_3">asdf</div><div id="fName_3">drag</div> 
    <div id="lName_6">asfd</div><div id="fName_6">drga</div> 
    <div id="lName_5">dasf</div><div id="fName_5">grda</div> 
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div> 
    <div id="lName_4">fasd</div><div id="fName_4">gard</div> 
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div> 
</div> 

이제 아래에 언급 한 바와 같이

페이지 뭔가처럼 보이는 : 같은 성 div의 값으로 분류하기에

<div id="containerDiv"> 
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div> 
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div> 
    <div id="lName_3">asdf</div><div id="fName_3">drag</div> 
    <div id="lName_4">fasd</div><div id="fName_4">gard</div> 
    <div id="lName_5">dasf</div><div id="fName_5">grda</div> 
    <div id="lName_6">asfd</div><div id="fName_6">drga</div> 
</div> 

, 컨테이너 사업부의 결과 구조가 보일 것입니다 당신 모두가 더 나은 방법으로 나를 도울 수 있습니다.

Answer 1

div 값을 읽어 객체 배열 (예 : 명사)을 얻거나 이름 만 지정하고 정렬 작업을 수행 할 것을 제안합니다. Thumb ... 결과를 초기 div로 출력합니다 (기본값을 덮어 씁니다).

Answer 2

정렬 필드에 영향을 줄 수있는 jQuery 정렬 기능을 빌드했습니다.

(행을 다른 위치로 이동하여 html을 다시 작성)

function sortTableJquery() 
{ 
    var tbl =$("#tbl tr"); 
    var store = []; 
    var sortElementIndex = parseFloat($.data(document.body, "sortElement")); 

    for (var i = 0, len = $(tbl).length; i < len; i++) 
    { 
     var rowDom = $(tbl).eq(i); 
     var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text()); 
      store.push([rowData, rowDom]); 
    } 
    store.sort(function (x, y) 
    { 
     if (x[0].toLowerCase() == y[0].toLowerCase()) return 0; 
     if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir")); 
     else return 1 * parseFloat($.data(document.body, "sortDir")); 

    }); 
    for (var i = 0, len = store.length; i < len; i++) 
    { 
     $("#tbl").append(store[i][1]); 
    } 
    store = null; 
} 

Answer 3

목록을 정렬 할 때마다 ListJs을 사용합니다.

큰 목록에서도 성능이 뛰어나며 매우 가볍습니다 (라이브러리에 무관심 함에도 불구하고 7KB).

Answer 4

이 샘플 예제입니다 HTML :

<div id="containerDiv"> 
    <div>2</div> 
    <div>3</div> 
    <div>1</div> 
</div> 

JS

$(function() { 
    var container, divs; 
    divs = $("#containerDiv>div").clone(); 
    container = $("#containerDiv"); 
    divs.sort(function(divX, divY) { 
     return divX.innerHTML > divY.innerHTML; 
    }); 
    container.empty(); 
    divs.appendTo(container); 
    }); 

당신이 당신의 divs.sort 기능 PARAM이 당신의 목표에 따라 설정할 수 있습니다.

jsFiddle.

과 jQuery Plugin 적절한