Question

在我的bootstrap 4.1 / jquery App中，我有几种形式的行，带有1个隐藏输入，1个文本输入和2个选择。就像：

<div class="controls">
<form role="form" autocomplete="off">



    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-5 p-1">
            <input type="hidden" id="modified_0" name="modified_0" value="">
            <input class="form-control editable_field" value="To do line 2..." id="todo_text_0" name="todo_text_0" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task" onchange="javascript:todoOnChange(0); ">
        </div>

        <div class=" col-3 p-1">
            <select class="form-control editable_field" id="todo_priority_0" name="todo_priority_0" data-placeholder=" -Select Is Featured- " onchange="javascript:todoOnChange(0); "><option value="" label=" -Select Priority- "></option><option value="1">No</option><option value="2">Low</option><option value="3" selected="">Normal</option><option value="4">High</option><option value="5">Urgent</option><option value="6">Immediate</option></select>
        </div>

        <div class=" col-3 p-1">
            <select class="form-control editable_field " id="todo_completed_0" name="todo_completed_0" data-placeholder=" -Select Is Featured- " onchange="javascript:todoOnChange(0); "><option value="" label=" -Select Completed- "></option><option value="1" selected="">Completed</option><option value="0">Opened</option></select>
        </div>
        <div class=" col-1 p-1">
                            <span class="input-group-append-btn">
                                <button class="btn btn-danger todo-btn-add" type="button">
                                    <span class="fa fa-minus"></span>
                                </button>
                            </span>
        </div>

    </div>
    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-5 p-1">
            <input type="hidden" id="modified_1" name="modified_1" value="">
            <input class="form-control editable_field" value="Write user's on using frontend application part lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut." id="todo_text_1" name="todo_text_1" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task" onchange="javascript:todoOnChange(1); ">
        </div>

        <div class=" col-3 p-1">
            <select class="form-control editable_field" id="todo_priority_1" name="todo_priority_1" data-placeholder=" -Select Is Featured- " onchange="javascript:todoOnChange(1); "><option value="" label=" -Select Priority- "></option><option value="1">No</option><option value="2">Low</option><option value="3">Normal</option><option value="4" selected="">High</option><option value="5">Urgent</option><option value="6">Immediate</option></select>
        </div>

        <div class=" col-3 p-1">
            <select class="form-control editable_field " id="todo_completed_1" name="todo_completed_1" data-placeholder=" -Select Is Featured- " onchange="javascript:todoOnChange(1); "><option value="" label=" -Select Completed- "></option><option value="1">Completed</option><option value="0" selected="">Opened</option></select>
        </div>
        <div class=" col-1 p-1">
                            <span class="input-group-append-btn">
                                <button class="btn btn-danger todo-btn-add" type="button">
                                    <span class="fa fa-minus"></span>
                                </button>
                            </span>
        </div>

    </div>
    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-5 p-1">
            <input type="hidden" id="modified_2" name="modified_2" value="">
            <input class="form-control editable_field" value="Prepare list of user's having access to backend part lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut..." id="todo_text_2" name="todo_text_2" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task" onchange="javascript:todoOnChange(2); ">
        </div>

        <div class=" col-3 p-1">
            <select class="form-control editable_field" id="todo_priority_2" name="todo_priority_2" data-placeholder=" -Select Is Featured- " onchange="javascript:todoOnChange(2); "><option value="" label=" -Select Priority- "></option><option value="1" selected="">No</option><option value="2">Low</option><option value="3">Normal</option><option value="4">High</option><option value="5">Urgent</option><option value="6">Immediate</option></select>
        </div>

        <div class=" col-3 p-1">
            <select class="form-control editable_field " id="todo_completed_2" name="todo_completed_2" data-placeholder=" -Select Is Featured- " onchange="javascript:todoOnChange(2); "><option value="" label=" -Select Completed- "></option><option value="1">Completed</option><option value="0" selected="">Opened</option></select>
        </div>
        <div class=" col-1 p-1">
                            <span class="input-group-append-btn">
                                <button class="btn btn-success todo-btn-add" type="button">
                                    <span class="fa fa-plus"></span>
                                </button>
                            </span>
        </div>

    </div>

</form>
<br>
<small>Press <span class="fa fa-plus"></span> to add to do item</small>
</div>

我需要再添加1行，这是我用JS代码为新创建的元素设置唯一ID /名称的方法：

       $(document).on('click', '.todo-btn-add', function(e)
         {
             e.preventDefault();
             var todos_count= parseInt($("#todos_count").val())+1

             var controlForm = $('.controls form:first'),
             currentEntry = $(this).parents('.entry:first'),
             newEntry = $(currentEntry.clone()).appendTo(controlForm);

             var modifiedHidden= newEntry.find('input');
             modifiedHidden.val('');
             modifiedHidden.attr('id','todo_modified_'+todos_count);     // That works OK
             modifiedHidden.attr('name','todo_modified_'+todos_count);

             var todo_text_input= modifiedHidden.next( "input" )
             todo_text_input.val('');
             todo_text_input.attr('id','todo_text_'+todos_count);
             todo_text_input.attr('name','todo_text_'+todos_count);      // That works OK

             var todo_select_priority= newEntry.next( "select" )         // But this fails ?

             todo_select_priority.val('');
             todo_select_priority.attr('id','todo_priority_'+todos_count);
             todo_select_priority.attr('name','todo_priority_'+todos_count);

             var todo_select_completed= todo_select_priority.next( "select" ) // But this fails too ?
             todo_select_completed.val('');
             todo_select_completed.attr('id','todo_completed_'+todos_count);
             todo_select_completed.attr('name','todo_completed_'+todos_count);

todo_select_priority变量未引用预期的第一次选择输入...

哪种方法有效？

谢谢！

Answer 1

$.next()仅在其兄弟姐妹中查找元素。如果要搜索其子元素，请改用find()和精确选择器。

<div class='container'>
  <div class='a'>a
    <div class='a2'>a2</div>
  </div>
  <div class='b'>b</div>
</div>

console.log($('.a').next('div')) // div.b
console.log($('.a').next('a2')) // undefined

添加动态行无法获取对创建的选择输入的引用

1 个答案: