jQuery는 정렬을 사용하여 DOM 요소를 정렬합니다.-PHP开发-php.cn

jQuery는 정렬을 사용하여 DOM 요소를 정렬합니다.

高洛峰

풀어 주다： 2016-12-07 14:43:21

원래의

1617명이 탐색했습니다.

머리말

정렬은 우리에게 매우 친숙한 장면입니다. 서버에서 목록을 받으면 인터페이스에 렌더링합니다. 물론, 대부분은 클라이언트에 목록을 다시 렌더링하기 위해 서버와 다시 상호 작용합니다. 이는 나쁜 생각은 아니지만 어떤 경우에는 프레임워크를 사용할 필요가 없습니다. 우리의 목적을 달성하기 위해 클라이언트에서 목록을 다시 생성할 필요가 없습니다. 왜 서버에 요청을 다시 보내나요? 아래를 살펴보겠습니다.

주제

먼저 w3c에서 js의 정렬 방법을 살펴보겠습니다.

<script type="text/javascript">
 
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
 
document.write(arr + "<br />")
document.write(arr.sort())
 
</script>

로그인 후 복사

결과 출력:

George,John,Thomas,James,Adrew,Martin
Adrew,George,James, John,Martin,Thomas

이 메서드를 호출할 때 매개 변수를 사용하지 않으면 배열의 요소가 보다 정확하게는 문자 인코딩 순서로 정렬됩니다. 하지만 정렬 규칙을 사용자 정의할 수 있습니다.

다음과 같이 정렬 방법 매개변수에서 정렬 기능을 사용자 정의합니다.

<script type="text/javascript">
 
function sortNumber(a,b)
{
return a - b
}
 
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
 
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
 
</script>

로그인 후 복사

출력은 다음과 같습니다.

10 ,5,40,25,1000,1
1,5,10,25,40,1000

위는 w3c에서의 정렬 방법입니다. 단순한? 어떤 실용적인 용도가 없습니까?

생각할 수 있는 실제 시나리오: 페이지에 목록을 렌더링할 때 페이지에 많은 콘텐츠가 있을 수 있으며 다른 콘텐츠를 보려면 마우스를 스크롤해야 하거나 이미 페이지의 처음 몇 항목을 다른 콘텐츠로 보려면 페이지 콘텐츠를 어떻게 바꿔야 할까요?

DOM 요소를 정렬하려면 정렬 방법을 사용하세요.

위 목록은 오른쪽 상단에 정렬 아이콘이 있습니다. 아이콘을 사용하면 목록의 오름차순과 내림차순 전환이 가능합니다.

정렬이므로 가장 먼저 고려해야 할 것은 정렬 규칙을 갖는 것입니다. 정렬 번호를 추가하면 클라이언트 목록을 정렬하거나 반전할 수 있습니다. 다음으로 ASP.NET MVC를 사용하여 정렬 반전을 보여줍니다. 뷰 코드를 보세요:

<div id="MessageList">
@{
 int count = 0;
 foreach (var m in Model)
 {
 count++;
 <div class="message-list-item" data-sort="@count">
  <div class="main-content">
  <div style="margin-top:20px"><a href="#">@m.title</a></div>
  <div class="q_content">
   <p>@m.body</p>
  </div>
  <div class="q_answeroption" style="border-top: 1px dotted #CCC;padding-bottom: 5px;padding-top: 5px;">
   <div class="lf">
   </div>
   <div class="answer_author">
   <a href="#" class="bluelink">@m.author</a>
   <span class="v-split">|</span>
   @m.postDate
   </div>
  </div>
  </div>
 </div>
 }
}
</div>

로그인 후 복사

위 class="message-list-item"에는 데이터 정렬 기능이 있으며 이를 통해 초기화가 구현됩니다. 종류. 이 기능은 DOM 요소 값을 비교한 후 sort 메소드를 사용하여 정렬하는 데 사용됩니다. 실제로 JQuery에서 정렬 메서드를 호출하고 궁극적으로 js에서 정렬 메서드를 호출하는 것입니다. 목록을 반대로 바꿔야 하며, 이를 위해서는 다음 단계가 필요합니다.

(1) 전역 변수를 정의합니다.

전역 변수를 정의하는 이유는 무엇인가요? 이 변수는 정렬 상태(asc 또는 desc)를 저장하는 데 사용됩니다.

(2) JQuery를 사용하여 목록의 모든 요소를 선택합니다.

(3) JQuery에서 sort 메소드를 실행하여 정렬합니다.

(4) detach 메소드를 통해 목록을 상위 노드에 다시 연결합니다.

전체 코드는 아래와 같습니다.

<script type="text/javascript">
var sortThread = {};
$(function () {
 sortThread.sortAscending = true;
 
 $("#ReverseOrder").on("click", function () {
 sortThread.sortAscending = !sortThread.sortAscending;
 
 var $msgListItem = $(".message-list-item");
 
 $msgListItem.sort(function (a, b) {
  var sort1 = a.getAttribute(&#39;data-sort&#39;) * 1;
  var sort2 = b.getAttribute(&#39;data-sort&#39;) * 1;
 
  var sortNum = 1;
  if (!sortThread.sortAscending)
  sortNum = -1;
 
  if (sort1 > sort2)
  return 1 * sortNum;
  if (sort1 < sort2)
  return -1 * sortNum;
 
  return 0;
 });
 
 $msgListItem.detach().appendTo("#MessageList");
 
 });
});
</script>

로그인 후 복사

물론, 클라이언트측에서 sort를 사용하면 역순 뿐만 아니라 정렬도 하게 되는데, 아래 인사정보 목록과 같습니다.

<ul class="peopleList">
 <li data-name="John Doe">Mr. John Doe</li>
 <li data-name="Trent Richardson">Mr. Trent Richardson</li>
 <li data-name="Cindy Smith">Ms. Cindy Smith</li>
 <li data-name="Bill Williams">Mr. Bill Williams</li>
 <li data-name="Jane Doe">Mrs. Jane Doe</li>
</ul>

로그인 후 복사

마찬가지로 위의 데이터 이름 기능을 얻어 이름을 정렬합니다.