왜이 jquery 선택기가 작동하지 않습니까?

Question

클라이언트에서 페이지를 수정하는 작업이 있는데 jQuery 자손 선택기가 예상대로 작동하지 않는 것으로 나타났습니다.

console.debug($("#mssysform8217 :input[name='email']").val()); 

test@gmail.com

:

<form action="http://submit.url/subscribe.php" method="post" enctype="multipart/form-data" id="mssysform8217" class="mssysform" > 
<div id="mssys-formcontainer"> 
    <div class="formfields"> 
     <table style="width: 100%"> 
     <div class="formfield-item" id="formfield-item-email"> 
      <tr> 
      <td class="style1"><label >E-mail címe</label></td> 
      <td> 
       <input type="text" name="email" value=""> 
       <div class="error-container">Please fill in this field!</div> 
       <div style="clear: both;"></div> 
      </td> 
      </tr> 
     </div> 
     </table> 
    </div> 
</div> 
</form> 

나는 파이어 폭스로 디버깅하려고 :

• 이 일을 여기

  는 HTML의 excrept입니다

• 이 작동하지 않았다 :

  console.debug($("#mssysform8217 #formfield-item-email :input[name='email']").val()); 
  

  정의되지 않은

• 하지만 :

  console.debug($("#mssysform8217 #formfield-item-email")); 
  

  [DIV 번호의 양식 필드 항목-email.formfield 항목을]

문제 제출 스크립트가 제 3 자 앱에 의해 생성되고 3 레벨 자손 선택자를 사용하려고한다는 것입니다.

Answer 1

HTML이 유효하지 않으므로 사용하려는 jQuery 선택기가 작동하지 않습니다.

<table style="width: 100%"> 
     <div class="formfield-item" id="formfield-item-email"> 
      <tr> 

이것은 유효한 HTML이 아닙니다. 셀 외부의 테이블 중간에 div (또는 <thead>, <tfoot>, <tbody>, <tr> 이외의 요소)를 배치하는 것은 유효하지 않습니다.

<div> 
    <table> 
    <tr><td></td></tr> 
    </table> 
</div> 

또는이 유효합니다 :

이 유효 보조 노트에

<table> 
    <tr><td><div></div></td></tr> 
</table> 

---

: 당신은 당신의 형태를 포맷 테이블을 사용하는 . 표는 표 형식의 데이터를 의미합니다. 레이아웃을 위해 테이블을 사용하는 것은 제 책에서 나쁜 생각입니다. HTML 요소 (테이블 = 테이블 형식 데이터, li = 목록, div = 페이지 분할 등)에 적절한 의미 체계를 사용합니다.