0

同じIDを持つ2つの同じ要素に対して同じjavascriptアクションを実行できるかどうかを理解する必要があります。

同じコンテンツのページに2回表示されるボックスがあります。

<div class="my_box" id="23"> Some bit 23 </div>

<div class="my_box" id="23"> Some bit 23 </div>

それから私はその要素を見つけます:(またはそれら？）

var my_box_find = document.getElementsByClassName('my_box');

いくつかの処理/計算の後、/both/ボックスのinnerHTMLを置き換えたいと考えています。

document.getElementById(my_box_find[i].id).innerHTML = 'New bit 23';

これは非常に単純化された例です。ただし、変更しようとしている要素が1回だけ表示される場合は機能します。2回表示された場合、最初のインスタンスのみが変更されます...

大声で考える： IDに乱数を追加して、各ボックスを疑似一意にすることができると思いました...しかし、これにより、不必要に2回計算が実行されます...両方を同時に更新する必要があります情報。

4

2 に答える 2

4

IDはページ内で一意である必要があります。一意でない要素を持つことは無効idです。

複数の要素を操作する場合は、各要素にクラスを割り当て、選択した結果をループします。クラスは複数回使用でき、要素には複数のクラスを割り当てることができます。

var els = document.getElementsByClassName('my_box');
for (var i = 0; i < els.length; i++) els[i].innerHTML = 'New bit 23';

または、jQuery を使用する場合:

$('.my_box').html('New bit 23');
于 2013-02-16T18:52:31.107 に答える
0

本当の答えは、すべての ID を一意にする必要があるということです。代わりに属性を使用してくださいdata-id(一意である必要はありません)。その場合も同じように処理できます。

ID が重複している必要がある場合は、疑わしいとはいえ、可能性はあります。querySelectorAll数字で始まる ID 属性では機能しないため、さらに難しくなりました(HTML5 .. ACK では有効ですが)。.my_boxとにかく、divの ID 属性を確認できます。

Array.prototype.forEach.call(document.querySelectorAll('.my_box'),
function (elem) {
    if (elem.id === '23') {
       elem.innerHTML = elem.innerHTML.replace('23', '24');
    }
});

http://jsfiddle.net/ExplosionPIlls/39nk2/

于 2013-02-16T19:00:14.780 に答える