ir a buscar objetos con los elementos HTML con Javascript, Mootools

Question

Por favor, compruebe mi código HTML siguiente:

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

Aquí está mi código JS:

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

    });
</script>

mi problema es que ¿Cómo puedo buscar el objeto de la próxima div con el elemento de la clase

si tengo objeto de la primera toogler entonces, ¿cómo puedo conseguir el objeto de la próxima primera div qué clase 'elemento'

No quiero dar a los identificadores de los elementos

Answer 1

Si usted no puede alterar la salida html y refactor según lo sugerido por Oskar (mejor de los casos), esto funciona:

e.getParent().getParent().getNext().getFirst().getFirst() - se le devolverá el siguiente div pero es lento.

Por desgracia, las mesas se vayan .getNext ( "div.element") ya que no es un hermano.

Otra forma en que funciona es la siguiente (si se ajustan a sus longitudes) - será mucho más rápido si la referencia se pone en el almacenamiento como un elemento 1-apagado:

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

No me gusta cualquiera de las soluciones, sin embargo, no mantenible / lo suficientemente escalable.

Answer 2

Usted no tendrá que recorrer y comprobar si la clase de uno en uno.

Answer 3

La forma más fácil de asignar un toggler al elemento toggled:

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

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/oskar/aTaBB

Además, deshacerse de la tabla.

Answer 4

Trate de usar Element.getNext ([partido]) .

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