2009-06-10 9 views
1

이봐, 내가 말할 수있는 방법을 다음JQuery ForEach 루프?

누군가가 내가

그래서 같은 기능 실행하려면를 클릭 내 테이블에

의 Foreach 태그 :

ForEachTag.click 
( 
    function (e) 
    { 
    } 
) 

답변

5

당신은 테이블이있는 경우를 이 같은 :

: 가장 기본적인 선택은 다음과 같이 것입니다

<table id='test'> 
<tr> 
    <td><a href="#">test</a></td> 
    <td>Hi</td> 
</tr> 
<tr> 
    <td><a href="#">test1</a></td> 
    <td>Hi</td> 
</tr> 
</table> 

$('a').click(function(e) { 
    alert('test!'); 
    return false; 
}); 

이것은 단지 문서의 링크 모두에 바인딩하는 것입니다. 더 많은 컨트롤을 원하십니까? - 그것은 개체의 집합이 방법으로 처리하기 때문에 jQuery를 너무 강력하다 "test의 id를 가진 요소 내부의 모든 <a> 요소를 나를 찾아서이 클릭 핸들러를 바인딩"기본적으로 말하는

$('#test').find('a').click(function(e) { 
    alert('test!'); 
    return false; 
}); 

.

이것은 빙산의 일각에 불과합니다. 당신은 훨씬 더 깊이 들어갈 수 있습니다. 첫 번째 <td>에 표시된 <a> 요소를 <tr>에 대해서만 바인딩하려면 어떻게해야합니까? 문제 없음 :

$('#test').find('td:nth-child(1) a').click(function(e) { 
    alert('test'); 
    return false; 
}); 

jQuery를 그것이 당신이 그것을 거의 필요 없습니다 바인딩 이벤트에 올 때, 당신은 요소의 집합을 반복 할 수 있도록하는 each 기능을 가지고 있지만. jQuery는 세트를 좋아하고 어떤 의미가있는 경우 요소 세트로 요청하는 모든 작업을 수행합니다.

+0

$ ("# 테스트").("a") == $ ("# test a") –

+0

@Josh : 동일한 선택기에서 모든 것을 사용하는 것을 좋아하는 팬이 아니며 find 구문을 사용하면 실제로 무엇이 표현인지 느낄 수 있습니다. 사고. –

+0

부. jQuery의 선택기 엔진의 목적은 CSS를 에뮬레이션하는 것입니다. 또한 find 함수에 대한 다른 호출을 연결하는 것은 비효율적입니다 (부당하게 그렇게). 나는 당신이 방금 미니 jQuery 튜토리얼을 대답으로 짜내고 싶다고 생각한다. –

0

음, 원하는 방식에 따라 다릅니다. (이벤트

  1. 는 부모 컨테이너의 클릭 리스너를 추가하여 선택
  2. 일치하는 각 태그에 대한 클릭 리스너를 추가하고 클릭 핸들러 함수 내에서 클릭 된 요소를 파악 : 기본적으로 두 가지 옵션이 있습니다 대표)

여러 태그에 동일한 클릭 리스너를 추가하려면 다음을 수행하십시오

$(selectorForElements).click(function (e) { 
    // Click handling code here. 
    // e is the event object 
    // this inside the handler refers to the element that was clicked. 
}); 

someth를 수행 event delegation을 사용하려면 같이 보내고 :

$(selectorForParentElement).click(function (e) { 
    var target = $(e.target()); 
    // Checked if we clicked the "correct" element, else traverse 
    // up the DOM tree until we find the parent element we ARE interested in. 
    if(!target.is(whatYouAreInterestedIn)) { 
     target = target.parent(whatYouAreInterestedIn).eq(0); 
    } 
    // Your click handler for the target goes here 
}); 

특히 오래된 브라우저, 적은 수의 청취자를 결합함으로써 메모리를 적게 소비하고 실행 속도를 증가하기 때문에 이벤트 위임을 사용하는 것이 좋습니다 수 있습니다. 현재 이벤트 위임에 대한 몇 가지를 읽을 수 있습니다 :

+0

target()을 사용하는 대신 live()가 훨씬 간결하며 이벤트 위임을 사용합니다. –

+0

그럴 것 같습니다. 프로토 타입에서 왔습니다. 난 아직도 그것을 어떻게 워드 프로세서에서 작동하는지 이해가 안돼 .. 그것은 내부적으로 이벤트 위임을 할 선택기와 일치하는 모든 요소를 ​​포함하는 부모를 찾으십시오? 아니면 항상 몸 태그에 붙어 있습니까? – PatrikAkerstrand

+0

소스 코드를 확인하지는 않았지만 아마도 body 태그에있을 것입니다. 다른 요소가 어디에서 팝업 될지 알 수 없기 때문입니다 (동적으로 추가 된 요소를 바인딩하는 방법으로 주로 광고되기 때문에).). –