第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何通過(guò)內(nèi)部文本對(duì) DOM 上的元素進(jìn)行排序

如何通過(guò)內(nèi)部文本對(duì) DOM 上的元素進(jìn)行排序

滄海一幻覺(jué) 2023-12-19 10:43:38
我有一個(gè)圖表，它根據(jù)數(shù)值將其值渲染為 body 元素內(nèi)的 div，并帶有一個(gè)類(lèi)。這工作正常。但接下來(lái)我需要根據(jù) div 的數(shù)值或背景顏色對(duì)它們進(jìn)行排序。但是，它需要從頁(yè)面的左下角開(kāi)始，并隨著數(shù)字的增加向上向右散開(kāi)?；旧暇拖裾劬€(xiàn)圖一樣。如果可能的話(huà)，我想遠(yuǎn)離圖書(shū)館。我該如何處理這個(gè)問(wèn)題？謝謝你們。let interval = setInterval(makeDivs, 5);function makeDivs(){   let cont = checkHeight();   if(cont){      let div = document.createElement('div');      let randNum = Math.random() * 100;      if(randNum < 20) { div.classList.add('blue') }      if(randNum >= 20 && randNum < 40) { div.classList.add('green') }      if(randNum >= 40 && randNum < 60) { div.classList.add('yellow') }      if(randNum >= 60 && randNum < 80) { div.classList.add('orange') }      if(randNum >= 80 && randNum < 101) { div.classList.add('red') }      div.textContent = randNum.toFixed(2);      document.querySelector('body').appendChild(div);   } else {      alert('done');      clearInterval(interval);      sortDivs(); // Begin sorting divs   }}function checkHeight(){   let w = window.innerHeight;   let b = document.querySelector('body').offsetHeight;   if(b < w) {      return true;   } else {      return false;   }}function sortDivs(){   document.querySelector("body div:last-child").remove();   alert('sorting now...')}* { box-sizing: border-box;}body { width: 100vw; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: end;}body div { width: calc(10% + 1px); text-align: center; border: 1px solid #ddd; margin: -1px 0 0 -1px; padding: 10px;}body div.blue { background: aqua; }body div.green { background: green; }body div.yellow { background: yellow; }body div.orange { background: orange; }body div.red { background: red; }
查看完整描述

3 回答

?
蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊

假設(shè)您已經(jīng)有一種在網(wǎng)格中組織此類(lèi) DIV 的機(jī)制（如圖所示），那么以下內(nèi)容應(yīng)該為您提供所需的內(nèi)容：


var items = divList.filter((div) => div.nodeType == 1); // get rid of the whitespace text nodes


items.sort(function(a, b) {

  return a.innerHTML == b.innerHTML

      ? 0

      : (a.innerHTML > b.innerHTML ? 1 : -1);

});

然后，根據(jù)需要將它們放回 DOM 中，例如：


for (i = 0; i < items.length; ++i) {

  divList.appendChild(items[i]);

}


查看完整回答
反對(duì) 回復(fù) 2023-12-19
?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

這適用于第一個(gè)代碼示例！


嘗試這個(gè) sortDivs 函數(shù)：


function sortDivs() {

    document.querySelector("body div:last-child").remove();

    alert('sorting now...')


    let toSort = document.getElementsByTagName("div")


    toSort = Array.prototype.slice.call(toSort, 0)

    toSort.sort((a, b) => {

        let aord = parseFloat(a.textContent);

        let bord = parseFloat(b.textContent);

        return bord - aord;

    })


    document.body.innerHTML = ""


    for(var i = 0, l = toSort.length; i < l; i++) {

        document.querySelector('body').appendChild(toSort[i]);

    }

}

并在css文件中將flex-wrap設(shè)置為wrap-reverse。希望我能幫忙:)


PS：請(qǐng)實(shí)現(xiàn)一些else if而不是僅執(zhí)行if


查看完整回答
反對(duì) 回復(fù) 2023-12-19
?
瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是我的示例代碼的一個(gè)小擺弄，演示了一個(gè)簡(jiǎn)單的解決方案，使用純 JavaScript 和絕對(duì) CSS 定位來(lái)實(shí)現(xiàn)您想要實(shí)現(xiàn)的目標(biāo)。?

正如一些人已經(jīng)指出的那樣，可能有一個(gè)庫(kù)已經(jīng)為此提供了更好且完整的解決方案 - 我沒(méi)有研究是否是這樣。

代碼：

文件.js

var container = document.getElementById("container")


var results = [1,2,3,4,5,6,7,8]


//you can pre-calculate the order of the distances

//here already orderdered array [distanec][X-axis][Y-axis]

var distances =[[0,0,0],

? ? ? ? ? ? ? ? [1,1,0],

? ? ? ? ? ? ? ? [1,0,1],

? ? ? ? ? ? ? ? [1.414, 1,1],

? ? ? ? ? ? ? ? [2,0,2],

? ? ? ? ? ? ? ? [2,2,0],

? ? ? ? ? ? ? ? [2.234, 2,1],

? ? ? ? ? ? ? ? [2.234, 1,2]]



for (i = 0; i < results.length; i++){


? var newDiv = document.createElement("div")

? newDiv.className = "result"

? newDiv.innerHTML = results[i]

? newDiv.style.left = distances[i][1]*20 + "px"

? newDiv.style.bottom = distances[i][2]*20 + "px"

? container.appendChild(newDiv)


}



function setColor(element){

?// set class based on value - you already have this part

}

樣式.css


#container {

? border: 4px;

? border-color: red;

? border-style: solid;

? height: 200px;

? width: 200px;

? position: relative;

}


.result{

? border: 2px;

? width: 20px;

? height: 20px;

? position: absolute;

? border-color: blue;

? border-style: solid;

? text-align: center;

}

網(wǎng)站.html


<div id="container">

</div>

輸出：

https://img1.sycdn.imooc.com/6581039f00017ca402140220.jpg

查看完整回答
反對(duì) 回復(fù) 2023-12-19
  • 3 回答
  • 0 關(guān)注
  • 223 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)