getElementById (child_div_id) VS $ (parentDiv) .attr ("child_div")

Question

많은 Div 요소가 페이지에 표시됩니다. 그들 중 일부는 서로간에 몇 가지 관계가 있습니다. 하나는 다른 하나에 추가됩니다.

내가 dinamycally, 그래서 그들에게 언제든지 액세스 할 수 추가, 제거 및 그들 중 많은 사람들을 업데이트해야

는, 나는 두 가지의 생각 : 줄

각각 다음 고유 ID를 div에 내가 필요로 할 때 getElementById을,

또는 가능한 한 적은 수의 ID를 제공하고 부모가 하위 div에 액세스하십시오.

$(parentDiv).attr("child", childDiv), or $(parentDiv).data("child", childDiv)" 

와 자식 요소를 얻을 : 내 질문이 더 효율적인 방법이 더 나은 것으로 간주되는, 빠른 인 (인

$(parentDiv).attr("child"), or $(parentDiv).data("child") 

입니다

을 이것에 대한이 같은 뭔가를해야 디자인, 등등 ..).

Answer 1

부모에 의해 가능하고 접근 자식 된 div이나, 제공 적은 ID 년대. 이를 위해 $ (parentDiv) .attr ("child", childDiv) 또는 $ (parentDiv) .data ("child", childDiv) "

과 같은 자식 요소를 가져오고 - $ (parentDiv) .attr ("아이") 또는 $ (parentDiv) .DATA 등 ("아이") 당신은 당신은 children, find 사용합니다. 하위 요소 요소에 액세스 할 어떻게

,

제 질문은보다 효율적인 방법 인 것입니다 (더 나은 디자인으로 간주 빠르고, 등등 ..).

이들은 아마도 별개의 질문입니다. id보다는 요소에 훨씬 더 효율적으로 액세스 할 수는 없겠지만, 구조와 사운드의 효율성 차이는 중요한이 될 가능성이 없습니다. 탐색 할 수있는 앵커 포인트가 충분해야합니다.

그것은 당신의 구조에 대한 자세한 내용은없이 고체 예를 제공하지만, 이제 당신이 세포에 클릭에 응답 할 테이블의 매우 고전적인 사례 살펴 보자 어렵다 :

이

<table> 
<tbody id="foo"> 
<tr data-info="first row"> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
</tr> 
<tr data-info="second row"> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
</tr> 
</tbody> 
</table> 

그것은하려는 매우 흔한 일을 다른 셀의 클릭을 기반으로 셀을 업데이트합니다. 테이블의 ID, 이벤트 위임 W 구조적 탐 v 메소드를 g 용하여이를 수행 할 수 있습니다.

$("#foo").on('click', 'td', function() { 
    // `this` is the cell that was clicked. If I want row-level data, I'd use: 
    alert("This row's info is " + $(this).closest('tr').data('info')); 

    // Or maybe I want the last cell in the row 
    alert("Last cell's text: " + $(this).siblings().last().text()); 
}); 

Answer 2

더 나은 설계 접근법을 위해 ID가있는 동적 요소 생성을 피하십시오. 일반적으로 동적으로 추가 된 요소에 필요한 CSS 클래스를 만드는 경우 훨씬 간단하고 훨씬 쉽게 디버깅 할 수 있습니다.

만들 경우 ID를 동적으로, 당신은 항상 지정된 ID 페이지에서 고유하고이 아닌 사소한 페이지에 복잡성으로 이어질 것을 보장해야한다. 이 외에도 IE와 Chrome은 비 고유 ID를 다르게 처리합니다 (브라우저 버전에 따라 다름). 디버그가 매우 불편합니다.

Answer 3

요소에 클래스 이름을 지정하면 요소를 그룹화 한 다음 jQuery를 사용하여 직접 액세스 할 수 있습니다. 그래서 상위 1에서 아무것도는 상위 1 클래스 등

$('.parent1').remove(); // will remove all parent1 classes