Question

我有一个显示联系人列表的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值（以防万一有人尝试用其他方法为我提供建议）。

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

谢谢。

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

Answer 2

尝试关注js

let d= document.querySelector('#list').children;

let ds=[...d].sort((a,b)=> [...b.classList].includes('online') ? 1 : -1 )

ds.map( (x,i)=> x.style.transform=`translateY(${i*50}px)`)

#list div {
  position: absolute; /* I add this style to prettify output */
}

<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>

或者删除翻译并使用纯CSS方法

#list {
  display: flex;
  flex-direction: column;
}

.contact {
  margin-bottom: 30px;
  order: 2;
}

.online {
  order:1
}

<div id="list">
    <div class="contact" >Contact 1</div>
    <div class="contact" >Contact 2</div>
    <div class="contact online">Contact 3</div>
    <div class="contact" >Contact 4</div>
    <div class="contact online" >Contact 5</div>
    <div class="contact online" >Contact 6</div>
    <div class="contact">Contact 7</div>
</div>

使用“变换”样式属性对特定DIV重新排序

2 个答案: