3

ボタンをクリックしたときにページに要素を追加する JavaScript スクリプトがあります。これらの新しい要素を使用したいので、それらを呼び出します。

var e = document.getElementsByName('group');

「グループ」という名前の要素（ソースコードでチェック）の追加の前後にそれを実行すると、同じ数の要素があります..

e.length /* before : return 2 */
e.length /* after... 2 :/ */

ドキュメントだと思います。更新されていません、それは本当ですか、解決策はありますか?

編集 ：

function newgroup() {
        var e = document.getElementsByName('group');
        var nb = e.length + 1;
        div = document.createElement("div");
        div.id = 'group'+nb;
        div.className = 'panel_drop';
        div.setAttribute('name', 'group');
        div.innerHTML = '<h5>Group '+nb+'</h5>';
        div.innerHTML += '<div class=\'drop_zone\'></div>';
        document.getElementById('groups').appendChild(div);
    }

私は属性を使用nameしてグループの数を数え、後で ID を使用してそれらを選択します。しかし、番号は更新されていません^^

編集2：

間違いでした。Chrome 開発ツールのブレークポイントに問題がありました。

4

3 に答える 3

3

getElementsByNamelive を返しますNodeList。これは、DOM に変更を加えると、結果が自動的に更新されることを意味します。私の知る限り、これはクロスブラウザーの問題の影響を受けるものではありません..したがって、あなたが見ている問題は無関係である可能性があります. 仕様から：

getElementsByName(name) メソッドは文字列名を取り、値が name 引数と等しい name 属性を持つドキュメント内のすべての HTML 要素を含むライブ NodeList を (大文字と小文字を区別して) ツリー順に返す必要があります。 . Document オブジェクトで同じ引数を使用してメソッドが再度呼び出されると、ユーザー エージェントは、以前の呼び出しで返されたオブジェクトと同じものを返す場合があります。それ以外の場合は、新しい NodeList オブジェクトを返す必要があります。

例:

http://jsfiddle.net/hhdPB/

var e = document.getElementsByName('group');

console.log(e.length); // 0

var el = document.createElement('span');
el.setAttribute('name', 'group');

document.body.appendChild(el);

console.log(e.length); // 1

document.body.appendChild(el.cloneNode(false));

console.log(e.length); // 2

また、投稿したコードは正常に動作するようです:

http://jsfiddle.net/GyTBw/1

function newgroup() {
    var e = document.getElementsByName('group');
    var nb = e.length + 1;
    console.log(nb);
    div = document.createElement("div");
    div.id = 'group' + nb;
    div.className = 'panel_drop';
    div.setAttribute('name', 'group');
    div.innerHTML = '<h5>Group ' + nb + '</h5>';
    div.innerHTML += '<div class=\'drop_zone\'></div>';
    document.getElementById('groups').appendChild(div);
}

for (var i = 0; i != 5; i++) {
    newgroup(); // 1 2 3 4 5
}
于 2012-07-29T15:37:07.183 に答える
0

これは、chrome 開発者ツールの操作でエラーが発生し、破損していました..ありがとう、申し訳ありません

于 2012-07-29T17:41:06.533 に答える
-3

ElementNames の代わりに JQuery と Classes を使用する必要があります。

たとえば、次のようになります。

<div class="MyDivs">abc</div>
<div class="MyDivs">def</div>
<div class="MyDivs">ghi</div>

によって選択されます：

var Divs = $(".MyDivs");
于 2012-07-29T15:37:58.773 に答える