Jquery : 아래의 모든 요소를 선택하십시오 - 각 요소에 여러 함수 수행

아래의 각 요소를 선택하고 모든 명령에 여러 jquery 명령을 적용하고 싶습니다.Jquery : 아래의 모든 요소를 선택하십시오 - 각 요소에 여러 함수 수행

HTML :

<body> 
    <div class="option"></div> 
    <div class="option"></div> 
    <div class="option"></div> 
    <div class="last"></div> <!-- SELECT FROM HERE --> 
    <div class="option"></div> 
    <div class="option"> 
    <img src="a.jpg"/> 
    <table> 
     <td><tr>1</tr></td> 
     <td><tr>2</tr></td> 
    </table> 
    </div> 
    <div class="option"></div> 
</body>

jQuery를 :

$(".last").nextAll().each(function() { 

     $(this).css('background-color','red'); 
     $(this).addClass('below'); 
     var thisobj = $(this); 
     //Example -> 
     $(this).load(function() { 
      $(thisobj).addClass('loaded'); 
     }); 
     $(this).error(function(){ 
      $(thisobj).addClass('error'); 
     }); 
     //more code etc... 

});

가 jQuery로이 같은 HTML 모양을 만들려면 : 클래스 아래에 모든 것을 선택하고 기능을 적용 할 수 있습니다. 모든 div가로드되었는지 확인합니다.

<body> 
    <div class="option"></div> 
    <div class="option"></div> 
    <div class="option"></div> 
    <div class="last"></div> 
    <div class="option loaded" style="background-color:red;"></div> 
    <div class="option error" style="background-color:red;"> 
     <img class="loaded" style="background-color:red;" src="a.jpg"/> 
     <table class="loaded" style="background-color:red;"> 
       <tr class="error" style="background-color:red;"> 
        <td class="loaded" style="background-color:red;">abc</td> 
       </tr> 
       <tr class="loaded" style="background-color:red;"> 
        <td class="loaded" style="background-color:red;">abc</td> 
       </tr> 
     </table> 
    </div> 
    <div class="loaded" class="option" style="background-color:red;"></div> 
</body>

출처

2012-02-23 Visualization

무엇이 문제입니까? –

수행 한 것처럼 임시 변수를 만들 때 성능이 향상됩니다. var thisobj = $ (this); ....하지만 실제로 사용해야합니다. –

당신의 HTML을 수정하십시오 ... 은 을 포함합니다 ... 다른 방법은 없습니다 – Birdman

여기 있습니다. 이렇게하면 DOM 트리를 탐색 할 수 있습니다. 난 단지 작동 표시하는 빨간색 스타일을 적용하고있어,하지만 당신은 따라

function style_children(parent) { 
    parent.css('background-color', 'red'); 
    parent.children().each(function() { 
     style_children($(this)); 
    }); 
} 

$(".last").nextAll().each(function() { 
    style_children($(this)); 
});

을 수정 내가 틀렸다면 정정 해줘 수 있지만,이 $ (문서) .ready() 함수를 배치하는 경우, 마치 문서 전체가 준비되기 전에로드 및 오류 기능이 이미 시작된 b/c를 실행하지 않습니다. 로드 및 오류 기능은 doc.ready가 실행 된 후에 내용을 동적으로 추가하는 경우에만 작동합니다.

출처

2012-02-23 23:18:39 Birdman

아,이 예제의 경우 [jsFiddle] (http://jsfiddle.net/eaXXp/2/)입니다. – Birdman

정확히 찾고있는 내용입니다. ! 많은 사람들이 전에는 각각의 함수()를 사용할 필요가 없다고 말했지만, 처음 선택했던 요소를 얻기 위해 각각의 함수를 2 개씩 수행해야한다는 것을 알지 못했습니다. 그것은 모든 것을 선택했습니다. 그 기능을위한 것이 아닌가? 외부 요소 만 선택하는 이유는 무엇입니까? – Visualization

Jquery : 아래의 모든 요소를 ​​선택하십시오 - 각 요소에 여러 함수 수행

답변

관련 문제

Jquery : 아래의 모든 요소를 선택하십시오 - 각 요소에 여러 함수 수행