使用JavaScript，mootools的取HTML Element对象

Question

请检查下面我的HTML：

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

这是我的JS代码：

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

    });
</script>

我的问题是，如何可以提取下一div的对象，具有类元素

如果我有第一toogler的对象，然后我怎样才能得到下一个第一div的对象，该对象类“元素”

我不希望给IDS的元素

Answer 1

如果不能改变HTML输出和重构由奥斯卡（最佳情况下）所建议的，工作的：

e.getParent().getParent().getNext().getFirst().getFirst() - 它会回报你的下一个DIV，但它的速度慢。

不幸的是，表打破.getNext（“div.element”），因为它不是一个兄弟节点。

这工作的另一种方式是这样的（如果它们的长度匹配） - 它会快得多如果参考放入元素存储为1通断：

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

我不喜欢任一溶液虽然，不维护/足够的可伸缩性。

Answer 2

您有权遍历和由一个检查一个类。

Answer 3

到切换元件分配toggler的最简单的方法：

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

这里的一个工作示例： http://jsfiddle.net/oskar/aTaBB

此外，摆脱表中的

Answer 4

尝试使用 Element.getNext（[匹配]）。

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