получить объект HTML-элемента с помощью javascript, mootools
-
19-09-2019 - |
Вопрос
Пожалуйста, проверьте мой 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, элемент которого класс
Я не хочу присваивать идентификаторы элементам
Решение
если вы не можете изменить вывод 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]);
});
Однако мне не нравится ни одно из решений, оно недостаточно обслуживаемо/масштабируемо.
Другие советы
Вам придется перебирать и проверять класс один за другим.
Самый простой способ назначить переключатель переключаемому элементу:
$$('.toogler').each(function(e, index){
console.log($$('.element')[index]);
});
Вот рабочий пример: http://jsfiddle.net/oskar/aTaBB
Также избавьтесь от стола.
Попробуйте использовать 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>