jQuery를 사용하여 정렬되지 않은 목록 정렬

이 문서의 예에서는 jQuery가 정렬되지 않은 목록의 정렬 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jQuery를 사용하여 정렬되지 않은 목록을 정렬하는 원리는 정렬되지 않은 목록에 있는 모든 목록 항목을 가져와서 배열 form, JavaScriptfunction을 사용하여 정렬하고 다시 출력합니다. 사용되는 jQuery 함수에는 Ready(), get(),

text(),each(),append() 및 JavaScript 함수 sort()가 포함됩니다.

1． jQuery 함수 소개 (1) jQuery 함수 get()--일치하는 요소 집합 가져오기
이 함수는 일치하는 모든 요소를 ​​가져오는 이전 버전과 호환되는 방법입니다(jQuery
객체와는 다름). , 실제로 요소 배열). 구문은 다음과 같습니다. object.get()

참고: 이 함수는 jQuery 객체 대신
DOM 객체를 직접 조작하려는 경우 매우 유용합니다.
(2) jQuery 함수 text()--요소의 콘텐츠를 가져오고 설정합니다.

이 함수는 일치하는 요소의 텍스트 콘텐츠를 가져오고 설정합니다. 구문은 다음과 같습니다.

object.text([val|fn])

참고: val 및 fn 매개 변수는 선택 사항입니다. val은 요소의 텍스트 콘텐츠 값을 설정하는 것입니다. fn(index, text) 함수는 두 개의 매개변수를 허용하는
문자열 을 반환합니다. index는 요소의 인덱스 위치입니다. 컬렉션이고 text는 원래 텍스트 값입니다.
(3) jQuery 함수 append()--요소에 콘텐츠를 추가합니다.

이 함수는 일치하는 각 요소에 콘텐츠를 추가합니다. 구문은 다음과 같습니다.

object.append(content|fn)

참고: 이 작업은 지정된 요소에 대해appendChild 메서드를 실행하고 이를 문서에 추가하는 것과 유사합니다. content 매개변수는 추가된 콘텐츠를 나타냅니다. fn(index, html)은 일치하는 각 요소에 추가하기 위한 HTML 문자열을 반환합니다. index 매개변수는 이 컬렉션에 있는 개체의 인덱스 값입니다. 객체의 원래 HTML 값입니다.


2. JavaScript 함수 소개
JavaScript 함수 sort()--배열 요소를 정렬하는 데 사용되는 요소 정렬입니다. 구문은 다음과 같습니다.

arrayObject.sort([sortby])

참고: sortby는 선택 사항이고 정렬 순서를 지정하며 함수여야 합니다. 반환 값은 정렬된 배열 자체입니다. 인수 없이 이 메서드를 호출하면 배열의 요소가 알파벳순으로 정렬됩니다. 보다 정확하게는 문자 인코딩 순서에 따라 정렬됩니다. 이를 달성하려면 먼저 비교를 위해 배열의 요소를 문자열(필요한 경우)로 변환해야 합니다.

다른 기준으로 정렬하려면 두 값을 비교하여 두 값의 상대적인 순서를 설명하는 숫자를 반환하는 비교 함수를 제공해야 합니다. 비교 함수에는 두 개의 매개 변수 a와 b가 있어야 하며 반환 값은 다음과 같습니다. a가 b보다 작으면 정렬된 배열에서 a가 b 앞에 나타나야 하며 0보다 작은 값이 반환됩니다. a가 b와 같으면 0이 반환됩니다. a가 b보다 크면 0보다 큰 값이 반환됩니다.


3． 기능적 구현
비정렬 목록 항목 정렬 기능을 구현하는 단계는 다음과 같습니다.

(1) 모든 목록 항목을 가져와서 배열에 로드합니다.

(2) 배열 객체를 정렬합니다.

(3) 정렬된 배열을 정렬되지 않은 목록에 다시 채웁니다.

먼저 jQuery 라이브러리를 소개합니다:

<script language="JavaScript" src="jquery-1.7.2.min.js"></script>

그런 다음 다음 정렬 함수 코드를 추가합니다:

<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function(){
  var items = $(".orderobj li").get(); //获取所有待排序li装入数组items
  items.sort(function(a,b) //调用JavaScript内置函数sort
  {
    var elementone = $(a).text();
    var elementtwo = $(b).text();
    if(elementone < elementtwo) return -1;
    if(elementone > elementtwo) return 1;
   return 0;
 });
 var ul = $(".orderobj");
 $.each(items,function(i,li)
 //通过遍历每一个数组元素，填充无序列表
 {
   ul.append(li);
 });
 });
</script>

위 코드는

array 그리고 목록 항목이 순서대로 정렬되도록 순서가 지정되지 않은 목록을 다시 채웁니다. 구체적인 효과는 그림과 같습니다.

위 내용은 jQuery를 사용하여 정렬되지 않은 목록 정렬의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!