Is it possible to mix multiple selector and filter using jQuery?

问题

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>

回答1:

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.

回答2:

Are you sure that you're not incorrectly using myForm instead of theForm?

That being said, what you're doing with the $(foo,bar) selector syntax is selecting foo elements within a bar context. If setting myForm as the context does not yield you results (when selecting without it does), that normally just means that you're either selecting in the wrong context, or that there just aren't any elements matching your selector in the given context.

Here's some more reading about it.

来源：https://stackoverflow.com/questions/8374672/is-it-possible-to-mix-multiple-selector-and-filter-using-jquery

标签

jquery

jquery-selectors

filter

attributes