如何根據數據屬性對父 div 中的子 div 進行排序？

Question

我正在嘗試使用 jQuery 對父 div 中的子div進行排序，但是我的代碼根本不起作用。 我的意圖是按升序對子div元素進行排序。 目前，我的模板結構是：

我正在使用這個 function 根據data-year屬性對子div進行排序：

 $(function() { $('.year').on('click', function(e) { e.preventDefault(); $('#parent').find('.child').sort(function(a, b) { var contentA = parseInt($(a).attr('data-year')); var contentB = parseInt($(b).attr('data-year')); return (contentA > contentB)? -1: (contentA < contentB)? 1: 0; }).appendTo('#parent'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button class="btn btn-sm dropdown-toggle" type="button" id="d_li" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sort By </button> <div class="dropdown-menu mt-1" aria-labelledby="d_li"> <button class="small dropdown-item newest" type="button">Newest</button> <button class="small dropdown-item name">Name</button> <button class="small dropdown-item year" type="button">Year</button> </div> </div> <div id="parent"> <div class="child" data-year="2010" data-ins="2">year 2010, ins 2</div> <div class="child" data-year="2000" data-ins="3">year 2000, ins 3</div> <div class="child" data-year="2020" data-ins="1">year 2020, ins 1</div> </div>

單擊年份按鈕后沒有任何變化，我做錯了什么？

Answer 1

您需要在排序 function 中交換運算符>和< 。

 $(function() { $('.year').on('click', function(e) { e.preventDefault(); $('#parent').find('.child').sort(function(a, b) { var contentA = parseInt($(a).attr('data-year')); var contentB = parseInt($(b).attr('data-year')); return (contentA < contentB)? -1: (contentA > contentB)? 1: 0; }).appendTo('#parent'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button class="btn btn-sm dropdown-toggle" type="button" id="d_li" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sort By </button> <div class="dropdown-menu mt-1" aria-labelledby="d_li"> <button class="small dropdown-item newest" type="button">Newest</button> <button class="small dropdown-item name">Name</button> <button class="small dropdown-item year" type="button">Year</button> </div> </div> <div id="parent"> <div class="child" data-year="2010" data-ins="2">year 2010, ins 2</div> <div class="child" data-year="2000" data-ins="3">year 2000, ins 3</div> <div class="child" data-year="2020" data-ins="1">year 2020, ins 1</div> </div>

Answer 2

實際上，如果您查看sort()文檔。 您會發現不需要三元，小於或大於操作或其他任何東西。 如果您要對數組進行排序（或者在特定情況下類似數組的元素，如HTML 集合），您應該始終考慮以下兩個語句：

如果compareFunction(a, b)返回小於0 ，則將a排序到低於b的索引（即a先出現）。

如果compareFunction(a, b)返回大於0 ，則將b排序到低於a的索引（即b排在第一位）。

注意：您的compareFunction是function(a, b){...} 。

所以你只需要堅持第一個語句並從a中減去b就可以了。

那么你的最終代碼應該是這樣的：

 $(function() { $('.year').on('click', function(e) { e.preventDefault(); $('#parent').find('.child').sort(function(a, b) { var contentA = parseInt($(a).attr('data-year')); var contentB = parseInt($(b).attr('data-year')); return contentA - contentB }).appendTo('#parent'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button class="btn btn-sm dropdown-toggle" type="button" id="d_li" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sort By </button> <div class="dropdown-menu mt-1" aria-labelledby="d_li"> <button class="small dropdown-item newest" type="button">Newest</button> <button class="small dropdown-item name">Name</button> <button class="small dropdown-item year" type="button">Year</button> </div> </div> <div id="parent"> <div class="child" data-year="2010" data-ins="2">year 2010, ins 2</div> <div class="child" data-year="2000" data-ins="3">year 2000, ins 3</div> <div class="child" data-year="2020" data-ins="1">year 2020, ins 1</div> </div>