buscar Elemento HTML objeto usando JavaScript, mootools

Question

Por favor, verifique o meu HTML abaixo:

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

Aqui está o meu código JS:

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

    });
</script>

meu problema é que como eu pode buscar o objeto da próxima div com elemento de classe

Se eu tiver objeto do primeiro toogler então como posso obter o objeto do próximo primeiro div qual classe 'elemento'

Eu não quero dar os ids para os elementos

Answer 1

Se você não pode alterar a saída html e refatorar como sugerido por Oskar (melhor caso), isso funciona:

e.getParent().getParent().getNext().getFirst().getFirst() - ele irá retornar a próxima div mas é lento.

Infelizmente, mesas quebrar .getNext ( "div.element"), uma vez que não é um irmão.

outra maneira que funciona é isso (se seus comprimentos combinar) - será muito mais rápido se a referência é colocado no armazenamento elemento como um 1-off:

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

Eu não gosto de qualquer solução, porém, não passível de manutenção / o suficiente escalável.

Answer 2

Você terá que percorrer e verificar a uma classe por um.

Answer 3

A maneira mais fácil de atribuir um toggler ao elemento alternado:

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

Aqui está um exemplo de trabalho: http://jsfiddle.net/oskar/aTaBB

Além disso, se livrar da tabela.

Answer 4

Tente usar Element.getNext ([jogo]) .

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