Nano Hash - криптовалюты, майнинг, программирование

Сортировка div в две группы

Этот вопрос связан с этим вопросом, но у меня есть другая проблема, которая Мне нужна помощь с. Я хотел бы иметь возможность сгруппировать свои div в две группы - обе отсортированы. Сортировка уже работает, но как разделить дов на две группы? Разделы-контейнеры в группе 2 содержат элемент с class="anotherGroup".

разметка такая:

<div class="container">
  <div class="terminal" data-price="195">
      <h3>195</h3>
  </div>
  195 - I should come in 2nd in group 1 which is displayed first.
</div>

<div class="container">
  <div class="terminal" data-price="220">
      <h3>220</h3>
  </div>
  220 - I should come in 3rd in group 1 which is displayed first.
</div>

<div class="container">
  <div class="terminal" data-price="740">
      <h3>740</h3>
  </div>
  740 - I should come in 2nd in group 2 which is displayed last.
  <div class="anotherGroup">Group 2</div>
</div>

<div class="container">
  <div class="terminal" data-price="140">
      <h3>140</h3>
  </div>
  140 - I should come in 1st in group 2 which is displayed last.
  <div class="anotherGroup">Group 2</div>
</div>

<div class="container">
  <div class="terminal" data-price="130">
      <h3>130</h3>
  </div>
  130 - I should come in 1st in group 1 which is displayed first.
</div>

Скрипт:

$('.terminal').sort(function (a, b) {
  return $(a).data('price') - $(b).data('price');
}).map(function () {
  return $(this).closest('.container');
}).each(function (_, container) {
  $(container).parent().append(container);
});

Поиграйте здесь.

Конечный результат должен быть:

130
195
220
140
740

Где 140 и 740 принадлежат к собственной группе, потому что они содержат элемент с именем класса «anotherGroup». Надеюсь, это имеет смысл. Любая помощь очень ценится.

jquery sorting
18.09.2013

  • Предположим, что у вас всего две группы. скрипка. 18.09.2013

Ответы:


1

Этого можно добиться с помощью insertAfter:

var _count = 0;
$('.terminal').sort(function (a, b) {
    return $(a).data('price') - $(b).data('price');
}).map(function () {
    return $(this).closest('.container');
}).each(paint);

function paint(_, container) {
    if ($(container).children('.anotherGroup')[0]) {
        $(container).parent().append(container);
    } else {
        var next = paint.next;
        if (next) {
            $(container).insertAfter(next);
        } else {
            $(container).parent().prepend(container);
        }
        paint.next = container;
    }
};

Рабочая скрипка

18.09.2013
  • Для ясности я добавил комментарии.. fiddle. 18.09.2013
  • Это довольно аккуратно. Работает отлично. Большое спасибо за твою помощь. 18.09.2013

    • 2

    Вы можете динамически добавить еще один data- с группой:

    // attr() required for dynamic data-xxx
$('.terminal').attr('data-group', 'Group 1'); 
$('.anotherGroup').each(function(el) {
    $(this).prev('.terminal').attr('data-group', $(this).html());
});
// Result : <div class="terminal" data-price="140" data-group="Group 2">

    И используйте конкатенацию data-group и data-price для сравнения ваших элементов:

    $('.terminal').sort(function (a, b) {
    var atxt = $(a).data('group')+$(a).data('price');
    var btxt = $(b).data('group')+$(b).data('price');
    return atxt.toLowerCase().localeCompare(btxt.toLowerCase());
}).map(function () {
    return $(this).closest('.container');
}).each(function (_, container) {
    $(container).parent().append(container);
});

    Обновленный JsFiddle

    Примечание: это будет работать для любой группы, если вы сохраните алфавитный порядок ("Группа 2", "Группа 3"...)

    18.09.2013
  • Это решение тоже может пригодиться. Спасибо. 18.09.2013
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..