CODEWITHSUNDEEP
jquerycssmethodsfilterselector
Dipti C
Dipti C

Reputation: 35

Not getting desired elements using Filter method

would like to clarify that I am very new to jquery and trying to learn.

I am trying to find all 'input' elements present within 'form' having class name as 'external' with filter method. But I am getting answer as 0 elements while I do have five input elements under form element with class external.

Can you please help me. Where m I going wrong.

Here is my code,

    <!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 -->

Upvotes: 1

Views: 57

Answers (3)

soramber
soramber

Reputation: 21

If you want to get only input elements of parent elements having class name as 'external', you can get as follows:

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

On the other hand, if you want to extract all input elements and extract only them, you can get using .fliter() as follows:

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

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

Upvotes: 1

Jose Carlos Ram&#237;rez V&#225;squez
Jose Carlos Ram&#237;rez V&#225;squez

Reputation: 180

filter will work in the input elements directly, none of them has the class external (the form has it), so try adding:

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

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

Upvotes: 1

Joseph Webber
Joseph Webber

Reputation: 2173

If you want to get all input elements on the page regardless of type, use $("input");

If you want to get all input elements regardless of type inside form tags with the class external, use $("form.external input");

Upvotes: 0

Related Questions