なぜこの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> 

私はFirefoxでそれをデバッグしようとした：

• これは働いていた。ここ

  は、HTMLのexcreptです

• これは働いていませんでした：

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

  未定義

• しかし：

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

  [DIV＃フォームフィールド項目-email.formfield項目]

を問題送信スクリプトがサードパーティーのアプリケーションによって生成され、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 =ページ区画など）に適切なセマンティクスを使用します。