1

如何使用 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 访问按钮？

4

5 回答 5

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

一旦你缓存了 jQuery 对象，就可以随意使用它了……

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

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

// 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})
于 2012-11-24T20:07:33.097 回答
1

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

$("#html_id")

jQuery 使用 CSS 选择器。

于 2012-11-24T20:08:16.513 回答
1 
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*/
于 2012-11-24T20:09:09.277 回答
1

给按钮一个类：

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

然后你可以得到所有的按钮

$('.myButton') ...

例如，循环它们：

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

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

});

如果要识别每个按钮，请将数字从类中解析出来或给它一个data-mynumber属性并使用$(this).data('mynumber')

于 2012-11-24T20:12:18.417 回答
1

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

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})

}
于 2012-11-24T20:19:03.560 回答