javascript - 使用 javascript、mootools 获取 HTML 元素对象

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 的对象，哪个类是“元素”

我不想给元素id

Answer 1

如果您不能按照 oskar 的建议(最好的情况)更改 html 输出和重构，则此方法有效:

e.getParent().getParent().getNext().getFirst().getFirst() - 它会返回下一个 div，但速度很慢。

不幸的是，表格打破了 .getNext("div.element") 因为它不是兄弟。

另一种可行的方法是这样(如果它们的长度匹配)——如果将引用作为 1-off 放入元素存储中，速度会快得多:

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

不过我不喜欢这两种解决方案，因为它们不够可维护/可扩展。