如何遍历jQuery动态创建的.hour类元素以获取其文本值？

Hey there! I totally get where you're stuck—let's figure out why your .each() call isn't logging anything and fix it up.

The Root Cause #

Your issue boils down to timing: the code that tries to loop through .hour elements is running before those elements are actually added to the DOM.

Here's what's happening:

• You're creating all your .hour divs inside the $(document).ready() function, which runs once the DOM is fully loaded.
• But if your .each() traversal code is either:
  1. Outside of the $(document).ready() function, or
  2. Inside the ready function but placed before the loop that creates the elements
     ...then when jQuery tries to find .hour elements, they don't exist yet. That's why the console shows nothing!

The Fix #

The simplest solution is to move your .each() code after the loop that creates and appends all the time slot elements, and keep it inside the same $(document).ready() block. This way, the elements are already in the DOM when you try to traverse them.

Here's the updated code:

$(document).ready(function(){ 
    var hours = ["8am", "9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm"]; 
    for (i = 0; i < hours.length; i++){ 
        // 创建包含所有内容的主行div
        var timeSlot = $("<div>"); 
        timeSlot.addClass("row time-block"); 
        // 创建左侧存放时间的区块
        var leftBlock = $("<div>"); 
        leftBlock.addClass("hour col-md-2"); 
        leftBlock.text(hours[i]); 
        timeSlot.append(leftBlock); 
        // 创建中间的文本输入区域
        var middleBlock = $("<textarea>"); 
        middleBlock.addClass("col-md-9 description"); 
        $(timeSlot).append(middleBlock); 
        // 创建保存按钮
        var btn = $("<button>"); 
        btn.addClass("saveBtn col-md-1"); 
        $(timeSlot).append(btn); 
        // 创建软盘图标
        var floppy = $("<img>"); 
        floppy.addClass("floppy"); 
        floppy.attr("src", "assets/save.png") 
        floppy.attr("alt", "icon of floppy disc"); 
        $(btn).append(floppy); 
        // 将所有内容追加到容器中
        $("#container").append(timeSlot); 
    } 

    // 现在遍历元素——它们已经存在于DOM中了！
    $('.hour').each(function(){ 
        console.log($(this).text()); 
    });
})

A Quick jQuery Tip for Newbies #

Always remember: jQuery can only interact with elements that are currently present in the DOM. If you're creating elements dynamically (like you are here), make sure any code that needs to access those elements runs after they've been appended to the page.

If you ever need to run code on dynamically added elements later (e.g., after a user clicks a button to add more time slots), you'd use event delegation—but for your current use case, moving the .each() call to the right spot will do the trick.

内容的提问来源于stack exchange，提问作者mcilhaggis