javascript - 如何使用 jQuery 将焦点添加到已删除类的 div 中包含的输入

Question

下面给出的代码是一个 jQuery 函数，它加载由 onclick 事件触发的引导模式。此模式有一个添加类别选项，单击该选项会显示之前隐藏的输入字段。问题是我想集中单击后出现的输入。

// code to show through on click
window.getModalForm_3=function(context){
  $('#ajaxModal').remove();
  var defaults = {
    title: 'Edit',
    action: '',
    helpText:'',
    icon: '',
    placeholder: '',
    name:'', name2:'', name3:'', name4:'', name5:'', name6:'', name7:'',
    value: '', value2: '', value3: '', value4: '', value5: '', value6: '', value7: '',
  };
  var context = $.extend(defaults, context);

  var modal = '<div class="modal fade" id="ajaxModal" tabindex="-1" role="dialog" aria-labelledby="ajaxModalLabel">';
      modal += '<div class="modal-dialog" role="document">';
      modal += '<div class="modal-content">';
      modal += '<div class="modal-header">';
      modal += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
      modal += '<h4 class="modal-title color-dark">'+ context.title +'</h4>';
      modal += '</div>';
      modal += '<form class="form-horizontal clearfix" action="'+ context.action +'" method="post">';
      modal += '<input type="hidden" name="_method" value="PUT">';
      modal += '<div class="modal-body">';
      modal += '<div class="col-full p-l-20 p-t-5 p-r-20 p-b-20">';
      modal += '<div class="col-full p-b-10">'+ context.helpText +'</div>';

      modal += '<div class="p-t-20 strong">Primary category</div>';

      modal += '<div class="col-full">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="category_id" name="category_id" value="'+ context.id +'" type="hidden"/>';
      modal += '<input id="category" type="text" class="form-control" name="category" value="'+ context.value +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="category" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_category" class=""></div>';
      modal += '</div>';
      modal += '<div id="categoryList"></div>';
      modal += '</div>';

      modal += '<div class="p-t-20 strong">Additional categories</div>';


      modal += '<div class="col-full '+ (context.name2 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name2 +'" type="text" class="form-control" name="'+ context.name2 +'" value="'+ context.value2 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name2 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name2 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div class="col-full '+ (context.name3 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name3 +'" type="text" class="form-control" name="'+ context.name3 +'" value="'+ context.value3 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name3 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name3 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div class="col-full '+ (context.name4 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name4 +'" type="text" class="form-control" name="'+ context.name4 +'" value="'+ context.value4 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name4 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name4 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div class="col-full '+ (context.name5 == "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-0 m-b-20 box-60-plus pull-left">';
      modal += '<input id="'+ context.name5 +'" type="text" class="form-control" name="'+ context.name5 +'" value="'+ context.value5 +'" required autocomplete="off" spellcheck="false" maxlength="255">';
      modal += '<label for="'+ context.name5 +'" class="control-label"><i class="fa fa-'+ context.icon +' m-r-5"></i>'+ context.placeholder +'</label><i class="bar"></i>';
      modal += '<div id="error_'+ context.name5 +'" class=""></div>';
      modal += '</div>';
      modal += '<div class="pull-left m-t-5 m-l-15 l-h-1 hideCategoryInputInModal" style="font-size: 30px;"><a href="#" style="text-decoration: none;">&times;</a></div>';
      modal += '</div>';

      modal += '<div id="showNextCategoryInModal" class="col-full '+ (context.name5 != "" ? "hidden" : "") +'">';
      modal += '<div class="form-group form-group-mat m-l-0 m-r-0 m-t-20 m-b-10 strong"><a href="#" style="text-decoration: none;">Add another category</a></div>';
      modal += '</div>';


      modal += '</div>';
      modal += '</div>';
      modal += '<div class="modal-footer">';
      modal += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
      modal += '<button type="button" class="btn btn-primary">Save changes</button>';
      modal += '</div>';
      modal += '</form>';
      modal += '</div>';
      modal += '</div>';
      modal += '</div>';
      $("body").append(modal);
      $('#ajaxModal')
        .on("shown.bs.modal", function() { $(this).find(".form-control:first").focusCursorAtEnd(); })
        .modal({ backdrop: 'static', keyboard: false });
      $("#showNextCategoryInModal").on('click', function(e) {
        e.preventDefault();

        ($( ".col-full.hidden" ).first()).find("input.form-control").focus(); // This is the line where I am facing problem

        $( ".col-full.hidden" ).first().removeClass("hidden");
        if (!($(".col-full.hidden")[0])) {
          $("#showNextCategoryInModal").addClass( "hidden" );
        }
      });
      $(".hideCategoryInputInModal").on("click", function (e) {
        e.preventDefault();
        $(this).closest('div.col-full').addClass( "hidden" );
        $(this).closest('div.col-full').find("input").attr("value", "");
        if (($(".col-full.hidden")[0])) {
          $("#showNextCategoryInModal").removeClass( "hidden" );
        }
      });
};

我尝试过 find()、next()、prev() 等等，但未能达到预期的结果。

模态图像:

Answer 1

您有多个具有选择器 input.form-control 的输入，您应该找到一个唯一的并关注它。如果我们假设您将显示最新的:

($( ".col-full:not(.hidden)" ).first()).find("input.form-control").last().focus();