получить объект HTML-элемента с помощью javascript, mootools

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 с элементом класса

если у меня есть объект первого инструмента, то как я могу получить объект следующего первого div, элемент которого класс

Я не хочу присваивать идентификаторы элементам

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

Самый простой способ назначить переключатель переключаемому элементу:

$$('.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>