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

【问题标题】：fetch HTML Element object using javascript, mootools使用 javascript、mootools 获取 HTML 元素对象
【发布时间】：2010-03-11 11:58:00
【问题描述】：

请检查我下面的 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

【问题讨论】：

标签： javascript mootools element mootools1.2

【解决方案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]);
});

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

【讨论】：

【解决方案2】：

您必须逐个遍历并检查该类。

【讨论】：

如何遍历元素？

【解决方案3】：

将切换器分配给切换元素的最简单方法：

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

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

另外，摆脱桌子。

【讨论】：

erm，一直调用选择器在大桌子上不会很快。缓存 $$("div.element") 会更好用

【解决方案4】：

尝试使用Element.getNext([match])。

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

【讨论】：