Question

如何使用jQuery访问动态创建的元素？假设我有以下代码：

for (var i = 0; i < count; i++)
{
    var div = document.createElement("div");
    div.setAttribute("id", "divHour" + i);

    var button = document.createElement("button");
    button.setAttribute("id", "btnHour" + i);

    div.appendChild(button);
    document.getElementById("divHours").appendChild(div);
}

如何使用jQuery访问按钮？

Answer 1

var $button0 = $('#btnHour0')
var $button1 = $('#btnHour1')
// ... etc ...

缓存jQuery对象后，请按照您的意愿使用它......

$button0.css({width: 400}).animate({width: 200})

EDIT 要访问循环中的所有按钮......

// assuming `count` is the same as the code used to create the buttons
for (var i = 0; i < count; i++){
    var $button = $('#btnHour'+i)
    // do stuff with $button here
}

修改

或者，访问ID为btnHour

的所有按钮元素

var $buttons = $('button[id^="btnHour"]')
// do stuff to all buttons here
$buttons.css({width:300})

Answer 2

只要您知道元素的HTML ID即可。您需要做的就是：

$("#html_id")

jQuery使用CSS选择器。

Answer 3

var buttons=$('button[id^="btnHour"]');

将为您提供整个按钮集

您的问题非常模糊，我怀疑您想要访问用户与之交互的div中包含的特定按钮。需要更多详细信息。

编辑：以下是如何在点击处理程序中访问按钮的索引。

var buttons=$('button[id^="btnHour"]').click(function(){
   var buttonIndex= buttons.index(this);
    var div=$('#divHour'+ buttonIndex)
    /* can now interact with corresponding div*/
});

找到父div的另一种更简单的方法是：

$('button[id^="btnHour"]').click(function(){
   var $parentDiv=$(this).parent()
})

使用eq()方法

定位特定按钮

var thirdButton=$('button[id^="btnHour"]').eq(2);/* indexing is zero based*/

Answer 4

给按钮一个类：

div.setAttribute("class", "myButton");

然后你可以用

获得所有按钮

$('.myButton') ...

例如，要遍历它们：

$('.myButton').each(function(){

    console.log($(this).attr("id"));

});

如果您想识别每个按钮，请从该类中解析该数字或为其指定data-mynumber属性并使用$(this).data('mynumber')

Answer 5

选择原始循环内的按钮...

for (var i = 0; i < count; i++)
{
    var div = document.createElement("div");
    div.setAttribute("id", "divHour" + i);

    var button = document.createElement("button");
    button.setAttribute("id", "btnHour" + i);

    div.appendChild(button);
    document.getElementById("divHours").appendChild(div);

    // moved after the button has been added to the DOM
    // do something with the button in jQuery
    $("#btnHour" + i).css({width:100})

}

如何使用jQuery访问以编程方式生成的元素

5 个答案: