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

发布于 2024-08-24 22:12:47 字数 1790 浏览 9 评论 0原文

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

我的问题是，

如果我有第一个 toolgler 的对象，我如何使用类元素获取下一个 div 的对象，那么我如何获取下一个第一个 div 的对象class 'element'

我不想给元素提供 id

原文

Please check my HTML below:

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

Here is my JS Code:

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

    });
</script>

my problem is that how can i fetch the object of the next div with class element

if i have object of the first toogler then how can i get the object of the next first div which class 'element'

I don't want to give the ids to the elements

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失去的东西太少 2024-08-31 22:12:47

如果您无法按照 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]);
});

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

if you can't alter the html output and refactor as suggested by oskar (best case), this works:

e.getParent().getParent().getNext().getFirst().getFirst() - it will return you the next div but it's slow.

unfortunately, tables break .getNext("div.element") as it's not a sibling.

another way that works is this (if their lengths match) - it will be MUCH faster if the reference is put in element storage as a 1-off:

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

i don't like either solution though, not maintainable / scalable enough.

回复收藏 0 原文

辞旧 2024-08-31 22:12:47

您必须逐一迭代并检查该类。

回复收藏 0 原文

余生共白头 2024-08-31 22:12:47

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

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

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

另外，去掉桌子。

The easiest way of assigning a toggler to the toggled element:

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

Here's a working example: http://jsfiddle.net/oskar/aTaBB

Also, get rid of the table.

回复收藏 0 原文

弥枳 2024-08-31 22:12:47

尝试使用 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>

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

回复收藏 0 原文

~没有更多了~