我有一个包含很多元素的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 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 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 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 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>
每个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 */
});
我希望你能帮助我...非常感谢!
我会将时间戳的获取和大小的获取抽象为单独的函数,以保持代码干燥。然后,你可以排序
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 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 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 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 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 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 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 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 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>