时间戳

首页 > 解决方案 > 使用“transform”样式属性重新排序特定的 DIV

javascript - 使用“transform”样式属性重新排序特定的 DIV

问题描述

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

我想更改样式属性的translateY值transform以将联系人推到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 值（以防有人会尝试用其他方法建议我）。

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

谢谢。

标签： javascript

解决方案

没有翻译可以更轻松地完成，但是由于您在其他答案中说您必须坚持翻译，所以这里有适合您的功能

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)`;   
    }
}

推荐阅读