使用JavaScript,mootools的取HTML Element对象
-
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的对象,具有类元素
如果我有第一toogler的对象,然后我怎样才能得到下一个第一div的对象,该对象类“元素”
我不希望给IDS的元素
解决方案
如果不能改变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]);
});
我不喜欢任一溶液虽然,不维护/足够的可伸缩性。
其他提示
您有权遍历和由一个检查一个类。
到切换元件分配toggler的最简单的方法:
$$('.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>
不隶属于 StackOverflow