返回数据属性值

Question

我正在使用 javascript 并动态添加了 9 个 div 到文档中。所以现在我有 9 个 div，每个 div 都有一个数据编号。数据编号从第一个 div 的 9 开始，到最后一个 div 的 17 结束。有没有办法可以定位 div 并返回分配给 div 的实际数据编号？我想这样做的原因是根据数据编号是否小于、大于或等于数组索引来设置 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

假设您希望最终将类添加到 div，您应该能够在创建 mainDiv 本身时执行此操作。

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

您还可以使用 data 属性查询元素： jQuery how to find an element based on a data-attribute value?

或者您可以获取所有 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());