Returning data attribute values

Question

I am using javascript and have dynamically added 9 divs to the document. So now I have 9 divs and each div has a data-number. The data-numbers start at 9 for the first div and end at 17 for the last div. Is there a way I can target the div and return the actual data-number assigned to the div? The reason I want to do this is to style the div based on if its data number is less than, greater than, or equal to an arrays index.

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)

So that's invalid HTML. `"data-number=..."` should be `data-number="..."` just like all other attributes — Taplar, Sep 21 '20 at 19:09
And which div do you want to log? You state "Is there a way I can target the div", but there are multiple divs. Which one? — Taplar, Sep 21 '20 at 19:10
This was exactly what the problem was. After moving the the quote to after the assignment operator the problem was solved. Thanks! — Patrick Whelan, Sep 24 '20 at 04:21

score 1 · Answer 1 · edited Sep 22 '20 at 18:17

Assuming you want to ultimately add the class to the div, you should be able to do that when you creating the mainDiv itself.

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

You could also query the element using data attribute: jQuery how to find an element based on a data-attribute value?

Or you could get all divs and get the data value and compare it: How to get the data-id attribute?

Jerubaal Xerxes · Accepted Answer · 2020-09-21T19:38:15.517

is the data number unique. if unique you can target by giving id of the data number


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());

Typo with your usage of template literals using `'` instead of the template literal delimiters. — Taplar, Sep 21 '20 at 19:27

Returning data attribute values

2 Answers2