Почему этот селектор jquery не работает?

Question

У меня есть задача от клиента исправить страницу, и я обнаружил, что селектор потомков jQuery не работает должным образом.

Вот выдержка из HTML:

<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:

• это сработало:

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

  test@gmail.com

• это не сработало:

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

  не определено

• но:

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

  [DIV #-вещь поле формы-email.formfield-пункт]

Проблема в том, что скрипт отправки генерируется сторонним приложением, и он хочет использовать трехуровневый селектор потомков.

Answer 1

Селектор jQuery, который вы пытаетесь использовать, не будет работать, поскольку HTML-код недействителен.

<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 = деления страниц и т. Д.).