是否有可能使用jQuery混合多个选择器和过滤器？ [英] Is it possible to mix multiple selector and filter using jQuery?

问题描述

我知道有可能使用jQuery来将Multiple Selector与多属性选择器，实际上，我用它。
例如，这工作正常：

  $（'input [type =checkbox] [name ^ = selected]：checked'，theForm）.length 
  

在我的例子中，theForm是包含＃form1的字符串，我用它来引用具有属性id =form1的表单。

那么问题是：是的上面可能混合使用jQuery过滤器？
这是一个代码示例：

pre $ var myVar = $（'input [name ^ =modcc_]' ，myForm）.filter（...）

我试图使用这个，我似乎没有得到元素在myVar
，但如果我简单地删除myForm这种方式

  var myVar = $（'input [name过滤（...）
  

有效... WHY ？我做错了什么？我确定myForm变量是正确的stuffed（它是一个包含＃formMod的字符串，与我的表单的id属性一致），我确信输入是在这个表单里面，而且这个ID是唯一的。

感谢您的帮助！

PS
这个问题来自我之前的一个我对这个问题的接受答案发表了评论，但是没有得到答案。我认为这无论如何可以作为一个问题，而不是一个简单的评论，所以...在这里！希望能有一个答案...

- 编辑
的问题，我把这里的表单HTML代码：

 < form action =...method =postid =formModname =formMod> 
< input type =hiddenname =catidvalue =412/> 
< td width =8％> 412< / td> 
< td> myName< / td> 
< td width =9％style =white-space：nowrap; background-color：LightGoldenRodYellow;> 
< input id =modcc_icvname =modcc_icvtype =textvalue =10maxlength =3size =4/> ;. 
< input id =modcc_dcvname =modcc_dcvtype =textvalue =25maxlength =2size =3/>％
< / td> 
< td width =18％class =actions_colstyle =background-color：LightGoldenRodYellow;> 
 [< a href =...> Annnulla< / a> ] 
< input type =submitname =confirmModvalue =Salva/> 
< / td> 
< / form> 
  

解决方案

问题在于您使用无效的标记。

您不能将< form> 元素作为< tr> 元素。

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

Chrome，它是这样呈现的：

 < tr> 
 <！ - 表单已经失去其内容 - > 
< form action =...method =postid =formModname =formMod>< / form> 
 
< input type =hiddenname =catidvalue =412> 
< td width =8％> 412< / td> 
< td> myName< / td> 
< td width =9％style =white-space：nowrap; background-color：LightGoldenRodYellow;> 
< input id =modcc_icvname =modcc_icvtype =textvalue =10maxlength =3size =4> ;. 
< input id =modcc_dcvname =modcc_dcvtype =textvalue =25maxlength =2size =3>％
< / td> 
< td width =18％class =actions_colstyle =background-color：LightGoldenRodYellow;> 
 [< a href =...> Annnulla< / a> ] 
< input type =submitname =confirmModvalue =Salva> 
< / td> 
 
< / tr> 
  

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

所以这就是为什么你可以找到< input> 元素做文档而不是从表单本身的上下文中搜索。

所以它与 .filter（），而是事实上你并没有选择任何元素。

I know there's the possibility, using jQuery, to mix Multiple Selector with Multiple Attribute Selector and, indeed, I used it. For example, this works fine:

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

In my example, "theForm" is a string containing "#form1" which I use to refer to my form that has the attribute id="form1".

Well, that said, the question is: is it possible mixing the above with jQuery filter? Here is a code example:

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

I tried to use this and I seem not to get elements in myVar but If I simply remove "myForm" this way

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

it works ... WHY? Am I doing something wrong? I know for sure that "myForm" variable is correctly "stuffed" (it's a string containing "#formMod" which coincide to my form's id attribute) and I am sure the inputs are inside that form and that it's the only thing with that ID.

Thank for your help!

P.S. This question comes from one of my previous I made in a comment to the accepted answer to this question that didn't get answered. I thought it could anyway deserved to be made as a question instead of a simple comment so... here it is! Hope to have an answer to it...

-Edit as asked, I put here the form HTML code:

<form action="..." method="post" id="formMod" name="formMod">
   <input type="hidden" name="catid" value="412" />
   <td width="8%">412</td>
   <td>myName</td>
   <td width="9%" 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 width="18%" class="actions_col" style="background-color:LightGoldenRodYellow;">
       [ <a href="...">Annnulla</a> ] 
       <input type="submit" name="confirmMod" value="Salva" />
   </td>
</form>

解决方案

The issue is that you're using invalid markup.

You can't have a <form> element as the direct child of a <tr> element.

Your HTML will be reworked in various ways depending on the browser, and the <td> elements and their content will likely be removed from the form so that the <td>s are the children of the <tr>.

When I put your markup in Chrome, this is how it is rendered:

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

   <input type="hidden" name="catid" value="412">
   <td width="8%">412</td>
   <td>myName</td>
   <td width="9%" 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 width="18%" class="actions_col" style="background-color:LightGoldenRodYellow;">
       [ <a href="...">Annnulla</a> ] 
       <input type="submit" name="confirmMod" value="Salva">
   </td>

</tr>

Notice that the <form> element is now empty.

So that's why you're able to find the <input> elements doing a document wide search, but not from the context of the form itself.

So it has nothing to do with the .filter(), but rather with the fact that you're not selecting any elements in the first place.

这篇关于是否有可能使用jQuery混合多个选择器和过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！