たとえば、次のhtmlブロックがあります。
<div class="span3">
<div class="firstDiv"></div>
</div>
<div class="span3">
<div class="secondDiv"></div>
</div>
このhtmlブロックのレプリカはjavascriptを使用して挿入できるので、これらのブロックを次々に多数持っています。
これらの要素を操作するためにこれらすべての要素にIDを設定することが、物事を行うための標準的/効率的な方法であるかどうかについての見解を聞きたいと思います。次のように、生成された要素に一致するサフィックスを持つ一意のIDを配置する良い方法があります。
...
<div class="span3">
<div id="firstDiv_154 class="firstDiv""></div>
</div>
<div class="span3">
<div id="secondDiv_154 class="secondDiv""></div>
</div>
<div class="span3">
<div id="firstDiv_155 class="firstDiv""></div>
</div>
<div class="span3">
<div id="secondDiv_155" class="secondDiv"></div>
</div>
...
次に、原則として、セット内のfirstDivをクリックしたときにsecondDivに対して何かを行うには、次のようにすることができます。
$('.firstDiv').on ('click', function(evt) {
var idToFind = $(evt.target).attr('id').replace(/firstDiv/, /#secondDiv/)
var $secondDiv = $(idToFind);
// do something with $secondDiv
});
IDを使用するより効率的な方法はありますか?
IDを使用しない場合は、jQueryを使用できます。
最初の要素から2番目の要素を見つけたい場合:
$('.firstDiv').parent().next().children()
要素を再配置しすぎると壊れます。
$('.firstDiv').closest('.span3').find('.secondDiv')
これはより堅牢ですが、最初のjQueryメソッドよりもリソースを大量に消費する可能性があります。
これらすべての方法のうち、(経験豊富なWeb開発者にお願いします)どの方法をお勧めしますか?