使用 Filter 方法未获得所需的元素

Question

想澄清一下，我是 jquery 的新手，正在努力学习。

我正在尝试使用过滤方法查找 'form' 中存在的所有 class 名称为 'external' 的元素。但是我得到的答案是 0 个元素，而我在带有 class external.

的表单元素下确实有五个输入元素

你能帮帮我吗？我哪里错了。

这是我的代码，

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript"      src="../jquery/jquery-3.3.1.min.js"></script>

        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <script>
            $(document).ready(function () {

                var para1 = $("input", $("form"));

//getting answer as 9 input elements
                console.log("pag contains", para1.length, "input elements");

//getting answer as 0 external elements while I am expecting answer as 5 
                alert(para1.filter(".external").length + ' external elements'); 

            });
        </script>

        <title></title>
    </head>
    <body>

        <form class="external">
            <input name="" type="checkbox" />
            <input name="" type="radio" />
            <input name="" type="text" />
            <input name="" type="button" />
            <input name="" type="button" />
        </form>

        <form>
            <input name="" type="checkbox" />
            <input name="" type="radio" />
            <input name="" type="text" />
            <input name="" type="button" />
        </form>


        <input name="" type="checkbox" />
        <input name="" type="radio" />
        <input name="" type="text" />
        <input name="" type="button" />


        <a href="#" class="external">link</a> 
        <a href="#" class="external">link</a> 
        <a href="#"></a> <a href="#" class="external">link</a> 
        <a href="#" class="external">link</a> 
        <a href="#"></a>




    </body>
    </html>

<!-- end snippet -->

Answer 1

如果你想获取页面上的所有输入元素而不考虑类型，使用$("input");

如果您想获取所有输入元素，而不管带有 class external 的表单标签内的类型，请使用 $("form.external input");

Answer 2

filter 将直接在输入元素中工作，其中 none 有 class 外部（表单有），所以尝试添加：

var para2 = $("input", $("form.external"));

alert(para2.length + ' external elements');

Answer 3

如果只想获取父元素class名字为'external'的input元素，可以这样获取：

var para2 = $('form.external > input');
console.log(para2.length);  // 5

另一方面，如果你想提取所有输入元素并只提取它们，你可以使用 .fliter() 如下：

var para1 = $('form > input');
var para2 = para1.filter(function() {
              return $(this).parent().hasClass('external')
            }); 

console.log(para1.length);  // 9
console.log(para2.length);  // 5

使用 Filter 方法未获得所需的元素

Not getting desired elements using Filter method

css

methods

jquery

filter

selector