fetch Elemento HTML oggetto utilizzando javascript, mootools

Question

Si prega di controllare il mio codice HTML qui sotto:

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

Ecco il mio Codice JS:

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

    });
</script>

il mio problema è che come faccio a recuperare l'oggetto di una prossima div con classe di elemento

se ho un oggetto della prima toogler allora come posso ottenere l'oggetto di una prossima prima div classe 'elemento'

Non voglio dare l'id di elementi

Answer 1

se non è possibile modificare il codice html di output e il refactoring come suggerito da oskar (caso migliore), questo funziona:

e.getParent().getParent().getNext().getFirst().getFirst() - si tornerà la prossima div, ma è lento.

purtroppo, le tabelle di pausa .getNext("div.l'elemento") non è un fratello.

un altro modo in cui funziona è questo (se le lunghezze corrispondono) - sarà MOLTO più veloce se il riferimento è messo in elemento di archiviazione di 1 sconto:

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

non mi piacciono entrambe le soluzioni, però, non mantenibili / scalabile.

Answer 2

Si deve scorrere e di controllo per la sola classe per volta.

Answer 3

Il modo più semplice di assegnazione di un toggler a quella dell'elemento:

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

Ecco un esempio: http://jsfiddle.net/oskar/aTaBB

Inoltre, sbarazzarsi del tavolo.

Answer 4

Provare a utilizzare Elemento.getNext([corrispondenza]).

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