Fetch HTML Element-Objekt mit Javascript, mootools

Question

Bitte überprüfen Sie mein HTML unten:

<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>

Hier ist mein JS-Code:

<script type="text/javascript" language="javascript">
    $$('.toogler').each(function(e){
        alert(e);
        // this will alert all the toogler div object

    });
</script>

mein Problem ist, dass, wie kann ich hole das Objekt des nächsten div mit der Klasse Elemente

wenn ich Objekt des ersten toogler habe dann, wie kann ich das Objekt der nächsten ersten div erhalten, welche Klasse ‚Element‘

Ich will nicht die IDs der Elemente geben

Answer 1

, wenn Sie die HTML-Ausgabe nicht ändern können und Refactoring wie oskar (best case) vorgeschlagen, das funktioniert:

e.getParent().getParent().getNext().getFirst().getFirst() - es wird der nächste div zurückkehren, aber es ist langsam.

leider Tabellen brechen .getNext ( „div.element“), da es nicht Geschwister.

ein weiterer Weg, die funktionieren, ist dies (wenn ihre Längen entsprechen) - es ist viel schneller sein wird, wenn die Referenz in Speicherelement als 1-off gesetzt wird:

var tooglers = $$("div.toogler"), elements = $$("div.element");
tooglers.each(function(el, i) {
    console.log(elements[i]);
    el.store("contentEl", elements[i]);
});

Ich mag es nicht entweder Lösung aber nicht wartbar / skalierbar genug.

Answer 2

Sie werden durch laufen müssen und prüfen Sie für die Klasse eins nach dem anderen.

Answer 3

Der einfachste Weg, um einen toggler zum getoggelt Elemente der Zuordnung:

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

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/oskar/aTaBB

Auch loszuwerden der Tabelle.

Answer 4

Versuchen Sie Element.getNext ([Spiel]) .

<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>