返回數據屬性值

Question

我正在使用 javascript 並動態添加了 9 個 div 到文檔中。 所以現在我有 9 個 div，每個 div 都有一個數據編號。 第一個 div 的數據編號從 9 開始，最后一個 div 的數據編號從 17 結束。 有沒有一種方法可以定位 div 並返回分配給 div 的實際數據編號？ 我想要這樣做的原因是根據數據編號是否小於、大於或等於 arrays 索引來設置 div 的樣式。

var businessHours = ["9AM" , "10AM" , "11AM" , "12PM" , "1PM" , "2PM" , "3PM" , "4PM" , "5PM"];
var businessIndex = [9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 17];

function createTimeblock() {
    for (var i = 0; i < businessHours.length; i++) {
        var mainDiv =`<div class="row border my-2 mx-1 time-block block${businessIndex[i]}" "data-number=${businessIndex[i]}">` +
                     `<p class="time-hour0 col-md-1">${businessHours[i]}</p>` +
                     `<div class="displayTodo col-md-9">` +
                     `<div class="storedTodo"></div>` +
                     `<textarea class="plan-here"></textarea>` +
                     `</div>` +
                     `<div class="col-md-2">` +
                     `<button class="col-md-5 clearBtn ml-1"><i class="fas fa-check"></i></button>` +
                     `<button class="col-md-5 saveBtn"><i class="fas fa-save"></i></button>` +
                     `</div>`;
        $('main').append(mainDiv);
    }    
}
    console.log(HERE IS WHERE I WOULD LIKE TO REUTRN A DIVS DATA-NUMBER)

Answer 1

假設您想最終將 class 添加到 div，您應該能夠在創建mainDiv本身時執行此操作。

const mainDiv = '<div class='+i > 0 && i <5 ? 'morning': 'afternoon'+'> .... </div>';

您還可以使用數據屬性查詢元素： jQuery 如何根據數據屬性值查找元素？

或者您可以獲取所有 div 並獲取數據值並進行比較： How to get the data-id attribute?

Answer 2

是唯一的數據編號。 如果唯一，您可以通過提供數據編號的 id 來定位

function createTimeblock() {
    for (var i = 0; i < businessHours.length; i++) {
        var mainDiv =`<div id="${businessHours[i]}" class="row border my-2 mx-1 time-block block${businessIndex[i]} data-number=$'{businessIndex[i]}'">` +
                     `<p class="time-hour0 col-md-1">${businessHours[i]}</p>` +
                     `<div class="displayTodo col-md-9">` +
                     `<div class="storedTodo"></div>` +
                     `<textarea class="plan-here"></textarea>` +
                     `</div>` +
                     `<div class="col-md-2">` +
                     `<button class="col-md-5 clearBtn ml-1"><i class="fas fa-check"></i></button>` +
                     `<button class="col-md-5 saveBtn"><i class="fas fa-save"></i></button>` +
                     `</div>`;
        $('main').append(mainDiv);
    }    
}
    console.log($("#{businessHours[0]}").attr("data-number").val());