chercher un objet HTML élément en utilisant javascript, Mootools

Question

S'il vous plaît vérifier mon code HTML ci-dessous:

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

Voici mon code JS:

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

    });
</script>

mon problème est que comment puis-je récupérer l'objet du prochain div avec l'élément de classe

si j'ai objet de la première toogler alors comment je peux obtenir l'objet de la prochaine première div qui classe « élément »

Je ne veux pas donner les ids aux éléments

Answer 1

si vous ne pouvez pas modifier la sortie html et refactor comme suggéré par oskar (meilleur cas), cela fonctionne:

e.getParent().getParent().getNext().getFirst().getFirst() - il vous retourner la prochaine div mais il est lent.

malheureusement, des tables de break .getNext ( "div.element") que ce n'est pas un frère.

une autre façon qui fonctionne est ce (si leurs longueurs correspondent) - il sera beaucoup plus rapide si la référence est mis dans le stockage des éléments comme 1-off:

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

Je n'aime pas non plus la solution mais, pas assez maintenable / évolutive.

Answer 2

Vous aurez à parcourir et vérifier la classe un par un.

Answer 3

La façon la plus simple de l'affectation d'un basculeur à l'élément basculée:

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

Voici un exemple de travail: http://jsfiddle.net/oskar/aTaBB

En outre, se débarrasser de la table.

Answer 4

Essayez d'utiliser Element.getNext ([correspondance]) .

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