如何僅使用Jquery對div列表進行排序？

Question

我有一個包含很多元素的div列表，我想做很多排序：

            <div id="lista-terremoti" style="">
              <div class="eq-lista">
                <div class="mark-eq-lista"><span style="display:none">1536017841000</span></div>
                <div class="dati-eq">
                  <div class="eq-lista-row" style="">
                    <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;23:37:21 UTC</div>
                    <div class="eq-lista-luogo">Al largo dell'Ecuador</div>
                    <div id="magn-ipo-link">
                      <div class="eq-lista-magn">4.9 M</div>
                      <div class="eq-lista-ipo">40 Km</div>
                      <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div>
                    </div>
                  </div>
                  <div class="ulteriore" style="display:none"></div>
                </div>
              </div>
              <div class="eq-lista">
                <div class="mark-eq-lista"><span style="display:none">1536017747000</span></div>
                <div class="dati-eq">
                  <div class="eq-lista-row" style="">
                    <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;23:35:47 UTC</div>
                    <div class="eq-lista-luogo">Isole Marianne</div>
                    <div id="magn-ipo-link">
                      <div class="eq-lista-magn">5 M</div>
                      <div class="eq-lista-ipo">200 Km</div>
                      <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div>
                    </div>
                  </div>
                  <div class="ulteriore" style="display:none"></div>
                </div>
              </div>
              <div class="eq-lista">
                <div class="mark-eq-lista"><span style="display:none">1536015211000</span></div>
                <div class="dati-eq">
                  <div class="eq-lista-row" style="">
                    <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;22:53:31 UTC</div>
                    <div class="eq-lista-luogo">California centrale, Stati Uniti</div>
                    <div id="magn-ipo-link">
                      <div class="eq-lista-magn">2.5 M</div>
                      <div class="eq-lista-ipo">15 Km</div>
                      <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div>
                    </div>
                  </div>
                  <div class="ulteriore" style="display:none"></div>
                </div>
              </div>
              <div class="eq-lista">
                <div class="mark-eq-lista"><span style="display:none">1536015088000</span></div>
                <div class="dati-eq">
                  <div class="eq-lista-row" style="">
                    <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;22:51:28 UTC</div>
                    <div class="eq-lista-luogo">Alaska meridionale</div>
                    <div id="magn-ipo-link">
                      <div class="eq-lista-magn">2.1 M</div>
                      <div class="eq-lista-ipo">74.6 Km</div>
                      <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div>
                    </div>
                  </div>
                  <div class="ulteriore" style="display:none"></div>
                </div>
              </div>
            </div>

每個.eq-lista地震都是很多數據： UTC中的日期 （地震時間戳記在.mark-eq-lista > span ）， 位置 ， 震級和深度 。

我想用兩種方式對列表進行排序：

1）從最早到最新（與現在相反）排序

2）從最高到最低（ .eq-lista-magn ）對其進行排序

我嘗試了這段代碼，但沒有用：

var items = $('#lista-terremoti > .eq-lista').get();
items.sort(function(a, b) {
  var keyA = $(a).children(':first').children();
  var keyB = $(a).children(':first').children();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var div_list = $('#lista-terremoti');
$.each(items, function(i, quake) {
  div_list.append(quake); /* This removes li from the old spot and moves it */
});

希望您能幫助我...非常感謝！

Answer 1

我將時間戳的獲取和幅度的獲取抽象為單獨的函數，以使代碼保持干燥。 然后，您可以按照

items.sort((a, b) => (
  eqToTimestamp(a) - eqToTimestamp(b)
  || eqToMagn(a) - eqToMagn(b)
));

請注意，時間戳比較通常會得出0以外的值，在這種情況下，幅度的差異很少會對列表順序產生影響。

 const eqToTimestamp = eq => Number(eq.children[0].textContent); const eqToMagn = eq => ( Number(eq.querySelector('.eq-lista-magn').textContent.match(/\\S+/)) ); const items = $('#lista-terremoti > .eq-lista').get(); items.sort((a, b) => ( eqToTimestamp(a) - eqToTimestamp(b) || eqToMagn(b) - eqToMagn(a) )); const div_list = $('#lista-terremoti'); items.forEach(item => div_list.append(item)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="lista-terremoti" style=""> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536017841000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;23:37:21 UTC</div> <div class="eq-lista-luogo">Al largo dell'Ecuador</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">4.9 M</div> <div class="eq-lista-ipo">40 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536017747000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;23:35:47 UTC</div> <div class="eq-lista-luogo">Isole Marianne</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">5 M</div> <div class="eq-lista-ipo">200 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536015211000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;22:53:31 UTC</div> <div class="eq-lista-luogo">California centrale, Stati Uniti</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">2.5 M</div> <div class="eq-lista-ipo">15 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536015088000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;22:51:28 UTC</div> <div class="eq-lista-luogo">Alaska meridionale</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">2.1 M</div> <div class="eq-lista-ipo">74.6 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> </div> 

僅按大小排序，請使用items.sort((a, b) => eqToMagn(a) - eqToMagn(b)); ：

 const eqToTimestamp = eq => Number(eq.children[0].textContent); const eqToMagn = eq => ( Number(eq.querySelector('.eq-lista-magn').textContent.match(/\\S+/)) ); const items = $('#lista-terremoti > .eq-lista').get(); items.sort((a, b) => eqToMagn(b) - eqToMagn(a)); const div_list = $('#lista-terremoti'); items.forEach(item => div_list.append(item)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="lista-terremoti" style=""> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536017841000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;23:37:21 UTC</div> <div class="eq-lista-luogo">Al largo dell'Ecuador</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">4.9 M</div> <div class="eq-lista-ipo">40 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536017747000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;23:35:47 UTC</div> <div class="eq-lista-luogo">Isole Marianne</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">5 M</div> <div class="eq-lista-ipo">200 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536015211000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;22:53:31 UTC</div> <div class="eq-lista-luogo">California centrale, Stati Uniti</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">2.5 M</div> <div class="eq-lista-ipo">15 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> <div class="eq-lista"> <div class="mark-eq-lista"><span style="display:none">1536015088000</span></div> <div class="dati-eq"> <div class="eq-lista-row" style=""> <div class="eq-lista-data" style="">2018-09-03&nbsp;&nbsp;22:51:28 UTC</div> <div class="eq-lista-luogo">Alaska meridionale</div> <div id="magn-ipo-link"> <div class="eq-lista-magn">2.1 M</div> <div class="eq-lista-ipo">74.6 Km</div> <div class="eq-lista-link"><a href="#" rel="nofollow">Dettagli</a></div> </div> </div> <div class="ulteriore" style="display:none"></div> </div> </div> </div>