是否可以使用 jQuery 混合多个选择器和过滤器？

Posted 2023-05-09

【中文标题】是否可以使用 jQuery 混合多个选择器和过滤器？

【英文标题】：Is it possible to mix multiple selector and filter using jQuery?

【发布时间】：2012-01-12 13:33:55

【问题描述】：

我知道有可能，使用 jQuery，mix Multiple Selector with Multiple Attribute Selector，事实上，我使用了它。 例如，这很好用：

$('input[type="checkbox"][name^="selected"]:checked', theForm).length

在我的示例中，“theForm”是一个包含“#form1”的字符串，我用它来指代具有属性 id="form1" 的表单。

好吧，也就是说，问题是：是否可以将上述内容与 jQuery 过滤器混合使用？ 这是一个代码示例：

var myVar = $('input[name^="modcc_"]', myForm).filter(...)

我尝试使用它，但我似乎没有在 myVar 中获取元素 但如果我以这种方式简单地删除“myForm”

var myVar = $('input[name^="modcc_"]').filter(...)

它有效...为什么？难道我做错了什么？我确定“myForm”变量已正确“填充”（它是一个包含“#formMod”的字符串，与我的表单的 id 属性一致）并且我确信输入在该表单内，并且它是唯一具有该 ID 的东西.

感谢您的帮助！

附： 这个问题来自one of my previous I made in a comment to the accepted answer to this question，没有得到回答。我认为无论如何都应该将其作为一个问题而不是简单的评论提出，所以......就是这样！希望有答案...

-编辑 按照要求，我将表单 html 代码放在这里：

<form action="..." method="post" id="formMod" name="formMod">
   <input type="hidden" name="catid" value="412" />
   <td >412</td>
   <td>myName</td>
   <td  style="white-space:nowrap; background-color:LightGoldenRodYellow;">
       <input id="modcc_icv" name="modcc_icv" type="text" value="10" maxlength="3" size="4" />.
       <input id="modcc_dcv" name="modcc_dcv" type="text" value="25" maxlength="2" size="3" />%
   </td>
   <td  class="actions_col" style="background-color:LightGoldenRodYellow;">
       [ <a href="...">Annnulla</a> ] 
       <input type="submit" name="confirmMod" value="Salva" />
   </td>
</form>

【问题讨论】：

这样的东西有帮助吗？ $("#letters 选项").filter("[attr=a],[attr=b]").remove().或者你可以试试 .add() 类api.jquery.com/add

【参考方案1】：

问题是您使用了无效标记。

您不能将<form> 元素作为<tr> 元素的直接子元素。

您的 HTML 将根据浏览器以各种方式进行修改，<td> 元素及其内容可能会从form 中删除，因此<td>s 是<tr> 的子元素。

当我将您的标记放入 Chrome 中时，它是这样呈现的：

<tr>
      <!-- THE FORM HAS LOST ITS CONTENT -->
   <form action="..." method="post" id="formMod" name="formMod"></form>

   <input type="hidden" name="catid" value="412">
   <td >412</td>
   <td>myName</td>
   <td  style="white-space:nowrap; background-color:LightGoldenRodYellow;">
       <input id="modcc_icv" name="modcc_icv" type="text" value="10" maxlength="3" size="4">.
       <input id="modcc_dcv" name="modcc_dcv" type="text" value="25" maxlength="2" size="3">%
   </td>
   <td  class="actions_col" style="background-color:LightGoldenRodYellow;">
       [ <a href="...">Annnulla</a> ] 
       <input type="submit" name="confirmMod" value="Salva">
   </td>

</tr>

请注意，<form> 元素现在为空。

这就是为什么您可以在整个文档范围内找到<input> 元素，但不能从表单本身的上下文中找到。

因此它与.filter() 无关，而是与您一开始没有选择任何元素这一事实有关。

【讨论】：

@danicotra：另一种选择是根本不使用<form> 标签，而只需使用$.post() 提交输入数据。但当然，这只适用于启用 javascript 的情况。

（我使用 firefox，因此我看到了正确的页面源...）我担心！例如，我知道它是无效的 xhtml 标记，但表单提交毕竟有效......虽然希望原因可能是另一个原因，而不是这个，因为我现在无法让表单包含整个表格，因为每个表格行可以包含其他可编辑的内容或操作（即其他可提交的表单），例如删除行/条目命令。

是的，我会避免依赖 $.post() 如果我不能设法重写我的 html 使我的表单包含没有嵌套表单的整个表格等。我很幸运我可以仍然通过为我的表单输入使用足够多的不同名称来满足我的需求，以避免选择错误的名称（尽管如此我希望我的页面能够正确验证，所以我会尽力制作它们）

【参考方案2】：

您确定您没有错误地使用myForm 而不是theForm？

话虽如此，您使用$(foo,bar) 选择器语法所做的是在bar 上下文中选择foo 元素。如果将myForm 设置为上下文不会产生结果（在没有它的情况下进行选择时），这通常意味着您要么在错误的上下文中进行选择，要么没有任何元素与您的选择器中的选择器匹配给定上下文。

这里是some more reading about it。

【讨论】：

是的，我确定该变量的名称和内容是正确的...我也认为可能是我的输入没有被捕获，因为它们有点超出表格...但是他们不是！