получить объект HTML Element, используя 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 с элементом class

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

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

Answer 1

, если вы не можете изменить вывод html и рефакторинг, как предлагает oskar (лучший вариант), это работает:

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

Попробуйте использовать 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>

Answer 3

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

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

Вот рабочий пример: http://jsfiddle.net/oskar/aTaBB

Кроме того, избавьтесь от таблицы.

Answer 4

Вам нужно будет пройти итерацию и проверить класс один за другим.