[英]fetch HTML Element object using javascript, mootools
Please check my HTML below: 请在下面检查我的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>
Here is my JS Code: 这是我的JS代码:
<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 我的问题是我如何获取带有class element的下一个div的对象
if i have object of the first toogler then how can i get the object of the next first div which class 'element' 如果我有第一个toogler的对象,那么我如何获得下一个第一个div的对象,哪个类为“元素”
I don't want to give the ids to the elements 我不想将id赋予元素
if you can't alter the html output and refactor as suggested by oskar (best case), this works: 如果您无法按照oskar的建议更改HTML输出并进行重构(最佳情况),则可以这样做:
e.getParent().getParent().getNext().getFirst().getFirst()
- it will return you the next div but it's slow. e.getParent().getParent().getNext().getFirst().getFirst()
-它会返回您的下一个div,但速度很慢。
unfortunately, tables break .getNext("div.element") as it's not a sibling. 不幸的是,表中断.getNext(“ div.element”),因为它不是同级的。
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: 另一种有效的方式是这样(如果它们的长度匹配)-如果将引用作为1项放入元素存储中,它将更快。
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. 我不喜欢任何一种解决方案,但不够可维护/可扩展。
您将必须遍历并逐一检查课程。
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 这是一个工作示例: http : //jsfiddle.net/oskar/aTaBB
Also, get rid of the table. 另外,摆脱桌子。
Try using Element.getNext([match]) . 尝试使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.