Question

我有一个包含输入字段和相应选择选项标记的div。我希望能够遍历第一个输入，然后是第一个选择选项，然后是第二个输入和第二个选择选项等，我正在迭代它们两个但我先得到3个文本输入然后是选择选项。有没有办法一次迭代一个元素？

这是我的HTML

<div id="inputDiv">
    <p>
        <input type="text" name="keys"></input>
        <select name = "choices">
            <option value="null"></option>
            <option value="text">Text</option>
            <option value="note">Note</option>
            <option value="dd">Drop Down</option>
        </select>
    </p>
</div>

和我的Jquery

$('#submit').on('click', function() {
    $("input").each(function() {
        $("#form").append('<p>'+$(this).val()+'</p>');
    });
    $("select").each(function() {
        switch($(this).val()) { 
            case "text":
                $("#form").append('<p> <input type="text"/> <button class="remInput">Remove</button> </p>'); 
                break;
            case "note":
                $("#form").append('<p> <textarea></textarea> <button class="remInput">Remove</button> </p> '); 
                break;
            case "dd":
                $("#form").append('<div class="ddCreator"> <button class="ddAddInput">Add Another Field</button> <p class="ddP"> <input type="text" name="ddText"/> </p> <button class="ddSubmit">Submit</button> </div>');
                break;
        }
    });

    $('#inputDiv').empty();
});

Answer 1

您可以遍历每个p的子项

$('p').children().each(function(i, elem) {
   if (elem.nodeName === 'INPUT') {
       // found input
   } else if (elem.nodeName === 'SELECT') {
       // found select
   }
});

同时迭代两个元素

1 个答案: