Question

我正在使用javascript，并已向文档中动态添加了9个div。所以现在我有9个div，每个div都有一个数据编号。第一个div的数据编号从9开始，最后一个div的数据编号从17开始。有没有一种方法可以定位div并返回分配给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());

返回数据属性值

2 个答案: