【问题标题】:How to loop through elements created in jQuery to get their text value?如何遍历在 jQuery 中创建的元素以获取它们的文本值?
【发布时间】:2021-02-13 01:12:23
【问题描述】:

我想循环遍历在 jQuery 中创建的具有“小时”类的 div,以查找其中包含的文本。

$(document).ready(function(){
    var hours = ["8am", "9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm"];

    for (i = 0; i < hours.length; i++){
        //create main row div that holds everything
        var timeSlot = $("<div>");
        timeSlot.addClass("row time-block");
        //creates block on left that holds the time
        var leftBlock = $("<div>");
        leftBlock.addClass("hour col-md-2");
        leftBlock.text(hours[i]);
        timeSlot.append(leftBlock);
        //creates the text input area in the middle
        var middleBlock = $("<textarea>");
        middleBlock.addClass("col-md-9 description");
        $(timeSlot).append(middleBlock);
        //Creates save button
        var btn = $("<button>");
        btn.addClass("saveBtn col-md-1");
        $(timeSlot).append(btn);
        //crates the floppy disc icon
        var floppy = $("<img>");
        floppy.addClass("floppy");
        floppy.attr("src", "assets/save.png")
        floppy.attr("alt", "icon of floppy disc");
        $(btn).append(floppy);
        
        //appending everything to the container
        $("#container").append(timeSlot); 
    }
})

我尝试使用 .each() 并且控制台日志不返回任何内容,尽管它适用于 html 页面上未动态创建的其他元素。我似乎找不到任何与浏览在 jQuery 中创建的对象有关的答案。

$('.hour').each(function(){
    console.log($(this).text());
});

任何关于尝试什么的建议将不胜感激,我是新手!

【问题讨论】:

    标签: jquery each


    【解决方案1】:

    您尚未将lead 类添加到您在ready 回调函数中添加到DOM 的任何元素。

    因此,当您尝试使用 lead 类对元素的文本进行控制台记录时,没有任何内容。

    【讨论】:

    • 抱歉,这是在 HTML 中的其他元素上进行测试后遗留下来的。它不适用于应用的小时课程。在上面的代码中进行了更改以反映它的实际外观。
    • 我已经做了一支笔,它似乎可以工作:codepen.io/josh-unit36/pen/QWEmypd - 你是在准备好的回调中还是在其他地方调用你的每个函数?
    • 我现在把它放在了 ready 函数之外.. aaaand 我只是把它移到里面了。谢谢!目前仍在把握范围。
    • 好的,好的。添加元素后,您需要调用 log 函数。如果之前调用它,那么在它尝试记录其文本值时,您的元素将不存在。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-10-08
    • 1970-01-01
    • 2015-02-07
    • 2023-01-12
    • 2011-06-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多