JavaScript, mootools를 사용하여 HTML 요소 객체를 가져 오십시오

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의 객체를 클래스 요소로 어떻게 가져올 수 있다는 것입니다.

첫 번째 Toogler의 객체가 있으면 다음 첫 번째 DIV의 객체를 얻을 수있는 방법

나는 요소에 ID를주고 싶지 않다

Answer 1

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]);
});

그래도 솔루션이 마음에 들지 않으며 유지 관리 가능 / 확장 가능하지 않습니다.

Answer 2

당신은 반복하고 수업을 하나씩 확인해야합니다.

Answer 3

토글 글러를 토글링 요소에 할당하는 가장 쉬운 방법 :

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

다음은 작업 예입니다. http://jsfiddle.net/oskar/atabb

또한 테이블을 제거하십시오.

Answer 4

사용해보십시오 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>