JavaScriptを使用してHTML Elementオブジェクトを取得し、MooToolsは
-
19-09-2019 - |
質問
以下の私のHTMLを確認してください。
<table cellpadding="0" cellpadding="0" border="0">
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo2</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo2 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo3</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo3 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo4</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo4 Content</div>
</td>
</tr>
</table>
ここに私のJSコードがあります:
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// this will alert all the toogler div object
});
</script>
私の問題は、どのように私はクラスの要素
で、次のdivのオブジェクトを取得することができるということです私が最初tooglerのオブジェクトを持っているならば、どのように私は、次の第1のdivのオブジェクトを取得することができますどのクラス「要素」
私は要素にidを与えたくない
解決
オスカー(最良の場合)により示唆されるように、あなたがHTML出力とリファクタリングを変更することができない場合、これは動作します:
e.getParent().getParent().getNext().getFirst().getFirst()
- それは、次のdivに戻りますが、それは遅いです。
残念ながら、テーブルは.getNext(「div.element」)を破ります。
作品別の方法は、これは(その長さが一致した場合)である - 参照が1オフとして要素ストレージに置かれている場合、それははるかに速くなります。
var tooglers = $$("div.toogler"), elements = $$("div.element");
tooglers.each(function(el, i) {
console.log(elements[i]);
el.store("contentEl", elements[i]);
});
私は/しかし、保守しないように十分にスケーラブルなソリューションのいずれかを好きではありません。
他のヒント
あなたはを反復処理し、一つのクラス1をチェックしなければならないものとします。
トグルエレメントにトグラーを割り当てる簡単な方法:
$$('.toogler').each(function(e, index){
console.log($$('.element')[index]);
});
ここで働い例です: http://jsfiddle.net/oskar/aTaBBする
また、テーブルを取り除くます。
Element.getNext([マッチ])に使用してみてください。
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// Get the next sibling with class element.
var nextElement = e.getNext('.element');
alert(nextElement);
});
</script>
所属していません StackOverflow