Как я могу сортировать div с помощью javascript

Я хотел бы отсортировать несколько div в порядке возрастания на основе их идентификатора данных. Как я могу это сделать?

<div class = "container" data-id = "1000">
  <div id = "H1"></div>
  <div id = "sub">sub 1</div>
  <div id = "sub">sub 2</div>
</div>

<div class = "container" data-id = "3000">
  <div id = "H1"></div>
  <div id = "sub"></div>
  <div id = "sub"></div>
</div>

<div class = "container" data-id = "2000">
  <div id = "H1"></div>
  <div id = "sub"></div>
  <div id = "sub"></div>
</div>

Дополнительная информация поможет. Например, откуда взялась переменная chapName?

— 14.05.2019 20:00

У вас не может быть заданного значения id более одного раза на странице. id всегда должен быть уникальным!

— 14.05.2019 20:04

Также container является недопустимым именем атрибута для div элементов. Это делает ваш HTML недействительным.

— 14.05.2019 20:07

Хм... "контейнер div" должен быть div id :-D

— 14.05.2019 22:12

Имя раздела — это переменная, которую я получаю из базы данных. Вот так: db.each("SELECT DISTINCT chapname FROM Chapters ORDER BY chaporder", function(err,chapters) { if (err) {console.info('ERROR!', err);} else { // create variable let chapname = []; // push callback 'chapters' into variable 'chapname' chapname.push(chapters.chapname); // console.info(row);

— 14.05.2019 22:15

javascript node.js sorting electron

14.05.2019 19:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

199

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение своей проблемы некоторое время назад:

function sortOut() {

    // get the classname chapcontainer
    var classname = document.getElementsByClassName('container');

    // create a variable and put the classes it into an array. 
    var divs = [];

    for (var i = 0; i < classname.length; ++i) {
        divs.push(classname[i]);
    }

    // Sort the divs based on data-id. 
    divs.sort(function(a, b) {
        return +a.getAttribute("data-id") - +b.getAttribute("data-id");
    });
};

divs.sort делает свое дело. Подробнее об этой функции можно узнать здесь:

https://www.w3schools.com/jsref/jsref_sort.asp

03.11.2019 00:12