jQuery가 자식 선택자를 처리하는 방법에 버그가 있습니까?

Question

jQuery가 자식 선택자를 처리하는 방법에 버그가 있습니까? 아니면 확실하지 않은 부분을 놓치고 있습니까? 그 아이가 *이 아닌 다른 아이 일 때 나는 그것을 작동시킬 수 없습니다.

는 여기가 실행하고있는 jQuery를 선택이다 :

$("#myTable > tr").each(function() { 
    // do somthing } 
); 

그리고 테이블 구조는 다음과 같습니다

<table id="myTable"> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
</table> 

어떤 요소는 위의 선택 #myTable > tr과 일치하지 않습니다. 그러나 아래 나열된 두 선택기가 정상적으로 작동합니다.

$("#myTable tr") // search all descendants for tr 

또는 어린이에 맞게 와일드 카드를 사용할 : 여기 잘못 될 수 있는지에

$("#myTable > *") // search all child elements 

어떤 아이디어?

빠른 답변 주셔서 감사합니다! 불행히도 하나만 선택할 수 있습니다.

Answer 1

아무 것도 제공되지 않으면 Firefox는 tbody 요소를 사용자의 tr 요소 주변에 자동으로 추가하기 때문에 그 때문입니다. 정말로 table > tr을 사용할 수 없습니다.

<table id="myTable"> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
</table> 

그러나 파이어 폭스는이보고 :

당신은이

<table id="myTable"> 
    <tbody> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
    </tbody> 
</table> 

다른 요소가 잘 작동합니다

<div> 
    <strong>Hi</strong> 
</div> 

그리고 선택 :

alert($("div > strong").text()); // Alerts "Hi" 

을

이

<table id="myTable"> 
    <tr> 
    <td><button>someButton</button></td> 
    <td><textarea>...</textarea></td> 
    </tr> 
</table> 

DOM을 실제로 포함 :

$("#mytable > tbody > tr"); 

는 <tbody>, <thead> 및 사용 :

는

<table id="myTable"> 
<tbody> 
    <tr> 
    <td><button>someButton</button></td> 
    <td><textarea>...</textarea></td> 
    </tr> 
</tbody> 
</table> 

너무로 변경3210

Answer 2

암시 <tbody> 요소 대신에 의미 추가 있습니다 테이블에있는 <tfoot> 요소는 좋은 습관입니다.

Answer 3

예, 더그가 완전히 옳습니다. 그의 답변을 보완하기 위해 브라우저에 보낼 HTML "텍스트"가 아니라 DOM을 가로 지르는 jQuery가 있다는 사실을 알고 있거나 그렇지 않다고 생각할 수도 있습니다.

DOM은 보내는 HTML에 대한 브라우저의 해석입니다.