Как отсортировать список div только с помощью Jquery? - PullRequest
Новая
       15

Как отсортировать список div только с помощью Jquery?

0 голосов
/ 04 сентября 2018

У меня есть список 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 */
});

Надеюсь, вы мне поможете ... Большое спасибо!

1 Ответ

0 голосов
/ 04 сентября 2018

Я бы абстрагировал получение метки времени и величины в отдельные функции, чтобы ваш код оставался СУХИМЫМ. Затем вы можете отсортировать по 

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>
...