javascript - 使用 "transform"样式属性对特定 DIV 重新排序

Question

我有一个显示联系人列表的 DIV 列表，其中一些 DIV 可能随机具有特定的 online 类名称。

我想更改 transform 样式属性的 translateY 值，以将online 联系人推送到其他联系人之上。

我目前的情况是这样的:

<div id="list">
    <div class="contact" style="transform: translateY(0px)">Contact 1</div>
    <div class="contact" style="transform: translateY(50px)">Contact 2</div>
    <div class="contact online" style="transform: translateY(100px)">Contact 3</div>
    <div class="contact" style="transform: translateY(150px)">Contact 4</div>
    <div class="contact online" style="transform: translateY(200px)">Contact 5</div>
    <div class="contact online" style="transform: translateY(250px)">Contact 6</div>
    <div class="contact" style="transform: translateY(300px)">Contact 7</div>
</div>

运行我的纯 JavaScript 函数后会发生什么，将联系人 3、5 和 6 推到订单上方，新的 DOM 应该如下所示:

<div id="list">
    <div class="contact" style="transform: translateY(150px)">Contact 1</div>
    <div class="contact" style="transform: translateY(200px)">Contact 2</div>
    <div class="contact online" style="transform: translateY(0px)">Contact 3</div>
    <div class="contact" style="transform: translateY(250px)">Contact 4</div>
    <div class="contact online" style="transform: translateY(50px)">Contact 5</div>
    <div class="contact online" style="transform: translateY(100px)">Contact 6</div>
    <div class="contact" style="transform: translateY(300px)">Contact 7</div>
</div>

现在，我应该看到联系人列表重新排序，因为具有 online 类的 DIV 具有新的 translateY 值。

这是我尝试过的:

var contacts = document.getElementsByClassName("online");
    for(var i = 0; i < contacts.length; i++)
    {
        var current = contacts[i].style.transform;
        contacts[i].style.transform = "translateY(0px)";
        var mainElements = document.getElementsByClassName("contact");


        mainElements[i].style.webkitTransform = current;
        mainElements[i].style.MozTransform = current;
        mainElements[i].style.msTransform = current;
        mainElements[i].style.OTransform = current;
        mainElements[i].style.transform = current;


        console.log('current element transform', current);
        console.log('current element transform after change', slides[i].style.transform);
        console.log('first element', mainElements[i].style.transform);
        //value is not changing to the new value, it remains 0 --^

    }

我认为代码很清楚，这就是我尝试了很长时间的事情，我知道我做错了什么，但我找不到确切的位置。

注意:我知道还有很多其他方法可以对项目进行重新排序，例如移动整个节点或使用 jQuery 或其他东西，但由于某些原因，我不希望有任何其他方法与我正在使用的方法不同，纯 JavaScript 并更改translateY 值(以防万一有人尝试用其他方法向我提供建议)。

希望我能在这里找到一些帮助。

谢谢。

Answer 1

无需翻译，可以更轻松地完成，但既然您在其他答案中说过，您必须坚持翻译，这里有适合您的功能

function orderByOnline() {

    // Select all contants
    const allContacts = document.querySelectorAll(".contact");

    // Prepare arrays where you will add online and offline contacts
    let onlineContacts = [], notOnlineContacts = [];

    // Use spread operator on query selector and use filter function
    // to check if contact has class online - means he is online
    [...allContacts].filter(function(contact) {
        if (contact.classList.contains("online")) {
            onlineContacts.push(contact); 
        } else {
            notOnlineContacts.push(contact)
        }
    });

    // Now parse throu online contacts, start from 0 because variable
    // i will be used to determine translate value
    for (let i = 0; i < onlineContacts.length; i++) {
        const translateValue = i * 50;
        onlineContacts[i].style.transform = `translateY(${translateValue}px)`;
    }

    // Sort offline contacts, but starting point has to be length of online contacts
    // so you can get proper values
    for (let i = onlineContacts.length; i < notOnlineContacts.length; i++) {
        const translateValue = i * 50;
        notOnlineContacts[i].style.transform = `translateY(${translateValue}px)`;   
    }
}