为什么这个 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());
  

  [电子邮件受保护]

• 这不起作用：

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

  未定义

• 但是：

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

  [div#formfield-item-email.formfield-item]

问题是提交脚本是由第三方应用程序生成的，并且它想要使用 3 级后代选择器。

Answer 1

您尝试使用的 jQuery 选择器将不起作用，因为 HTML 无效。

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

这不是有效的 HTML。放置 div（或除 、、 之外的任何元素）是无效的) 位于单元格外部的表格中间。

这是有效的：

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

或者这是有效的：

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

---

旁注： 您正在使用表格来设置表单格式。表格用于表格数据。在我的书中，使用表格进行布局是一个坏主意。对 HTML 元素使用正确的语义（表格 = 表格数据、li = 列表、div = 页面划分等）。