Не удается получить нужные элементы с помощью метода Filter - PullRequest
Новая
       27

Не удается получить нужные элементы с помощью метода Filter

0 голосов
/ 13 июня 2018

хотел бы уточнить, что я новичок в jquery и пытаюсь учиться.

Я пытаюсь найти все входные элементы, присутствующие в «форме», имеющие имя класса как «внешнее» с методом фильтра,Но я получаю ответ в виде 0 элементов, в то время как у меня есть пять элементов ввода в элементе формы с классом 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 -->

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

filter будет работать непосредственно с входными элементами, ни один из них не имеет класса external (у формы есть), поэтому попробуйте добавить: 

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

alert(para2.length + ' external elements');
0 голосов
/ 13 июня 2018

Если вы хотите получить только входные элементы родительских элементов с именем класса в качестве «внешнего», вы можете получить следующее: 

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
0 голосов
/ 13 июня 2018

Если вы хотите получить все элементы ввода на странице независимо от их типа, используйте $("input");

Если вы хотите получить все элементы ввода независимо от типа внутри тегов формы с классом external, используйте$("form.external input");

...