JQuery selects DOM elements and accesses internal elements

Question

I am trying to make a small script. I have a main div that has 300 internal divs and I access them through:

$("#items").find(".item").each(function(index,ele){
    console.log(ele);
})

This way it writes me all the internal divs. Now I want to access the labels and read their internal html of these divs found.

How can i do this? Tried to mess around with ele.labeland ele.$("label"), but it doesn't work.

Answer 1

You need to use .findor .childrento find child / nested elements.

$(ele).children('label') // takes just direct children
$(ele).find('label') // take all nested labels

Answer 2

Try this and let me know if this helps.

$("#items").find(".item").each((i, e) => console.log(e.innerHTML))

Run codeHide result

Answer 3

html(), innerHTML of label.

$("#items").find(".item label").each(function(index,ele){
    console.log($(ele).html())});

$("#items").find(".item").each(function(index,ele){
    console.log($(ele).find('label').html();)})

Answer 4

javascript:)

itemslabelArr = document.querySelectorAll("#items .item label")
for (var i = 0, len = itemslabelArr.length; i < len; i++) {
console.log(itemslabelArr[i].innerHTML);
}

Answer 5

$("#items .item").each(function(index,element){
    var labelText = $('label', element).text(); // or .html()
    console.log(labelText);
})