JavaScriptを使用してHTML Elementオブジェクトを取得し、MooToolsは

Question

以下の私の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を与えたくない

Answer 1

オスカー（最良の場合）により示唆されるように、あなたが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]);
});

私は/しかし、保守しないように十分にスケーラブルなソリューションのいずれかを好きではありません。

Answer 2

あなたはを反復処理し、一つのクラス1をチェックしなければならないものとします。

Answer 3

トグルエレメントにトグラーを割り当てる簡単な方法：

$$('.toogler').each(function(e, index){
    console.log($$('.element')[index]);
});

ここで働い例です： http://jsfiddle.net/oskar/aTaBBする

また、テーブルを取り除くます。

Answer 4

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>