JavaScript, mootools를 사용하여 HTML 요소 객체를 가져 오십시오
-
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의 객체를 얻을 수있는 방법
나는 요소에 ID를주고 싶지 않다
해결책
Oskar (Best Case)가 제안한대로 HTML 출력 및 리팩터를 변경할 수없는 경우 다음과 같습니다.
e.getParent().getParent().getNext().getFirst().getFirst()
- 다음 div로 돌아갈 것이지만 느립니다.
불행히도, 테이블은 형제가 아니기 때문에 .getNext ( "div.element")를 깨뜨립니다.
또 다른 방법은 이것 (길이가 일치하는 경우)입니다. 참조가 요소 저장소에 1 -off로 표시되면 훨씬 빠릅니다.
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 ([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>
제휴하지 않습니다 StackOverflow