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

要素のHTMLIDを知っている限り。あなたがする必要があるのはこれだけです：

$("#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を見つけるもう1つの簡単な方法は、次のとおりです。

$('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 に答える