Форум

ufaclub · #1 (**permalink**) 16.02.2023, 12:45

есть вывод вот таких блоков

<div class="row gx-2 gy-2 sortx">'

<div class="col-2 s1"></div>
<div class="col-2 s0"></div>
<div class="col-2 s1"></div>
<div class="col-2 s0"></div>
<div class="col-2 s0"></div>
<div class="col-2 s1"></div>
<div class="col-2 s1"></div>
<div class="col-2 s0"></div>

</div>

как на JQ или чистом JS сделать пересборку этого блока row gx-2 gy-2 sortx

чтобы внутри сначала были записи

<div class="col-2 s0"></div>
<div class="col-2 s0"></div>
<div class="col-2 s0"></div>
<div class="col-2 s0"></div>
<div class="col-2 s0"></div>

потом

<div class="col-2 s1"></div>
<div class="col-2 s1"></div>
<div class="col-2 s1"></div>
<div class="col-2 s1"></div>

т.е сделать сортировку по class s0/s1

рони · #2 (**permalink**) 16.02.2023, 12:57

ufaclub,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .s1 {
            background-color: #1E90FF;
        }
        .s0 {
            background-color: #3CB371;
        }
        .col-2 {
            height: 15px;
            margin: 4px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let sort = document.querySelector(".sortx");
            sort.append(...sort.querySelectorAll(".s1"))
        })
    </script>
</head>
<body>
    <div class="row gx-2 gy-2 sortx">
        <div class="col-2 s1"></div>
        <div class="col-2 s0"></div>
        <div class="col-2 s1"></div>
        <div class="col-2 s0"></div>
        <div class="col-2 s0"></div>
        <div class="col-2 s1"></div>
        <div class="col-2 s1"></div>
        <div class="col-2 s0"></div>
    </div>
</body>
</html>

ufaclub · #3 (**permalink**) 16.02.2023, 21:18

спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript