繁体   English   中英

jQuery最近的问题()和addClass()

Problem with jquery closest() and addClass()

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我现在陷入困境,我们将不胜感激。 我在Bootstrap模态中有以下表单:

<form action="" method="post" id="UserForm" class="form-horizontal">
<div class="modal-body">
    <div class="form-group">
        <label for="iUserName" class="col-sm-3 control-label">User Name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="iUserName" id="iUserName" placeholder="User Name" value="" />
        </div>
    </div>

    <div class="form-group">
        <label for="iPassword" class="col-sm-3 control-label">Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="iPassword" id="iPassword" placeholder="iPassword" value="" />
        </div>
    </div>

    <div class="form-group">
        <label for="iConfPassword" class="col-sm-3 control-label">Confirm Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="iConfPassword" id="iConfPassword" placeholder="Confirm Password" value="" />
        </div>
    </div>

    <div class="form-group">
        <label for="iRoleSelect" class="col-sm-3 control-label">Role</label>
        <div class="col-sm-9">
            <select class="form-control select2" id="iRoleSelect" name="iRoleSelect" style="width: 100%;"></select>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-info pull-right">Save</button>
</div>
</form>

这是我的JS:

$('#UserForm').on('submit', function () {
        var flag_UserName, flag_Password, flag_Role
        var emptyInput = $('#UserForm').find('input[type=text], input[type=password], select').val('')
        for (var i = 0; i < emptyInput.length; i++) {
            var div = emptyInput[i].closest('.form-group').addClass('has-warning')
            console.log(div)
            return false;
        }
    })

我想做的是查找表单中的每个空输入,然后将新的“具有警告”类添加到距该输入最近的div中。 我当前的代码给我这个错误:

TypeError: emptyInput[i].closest(...).addClass is not a function

2 个回复

我希望你尝试这样做

 $('#UserForm').on('submit', function () { var flag_UserName, flag_Password, flag_Role var emptyInput = $('#UserForm').find('input[type=text], input[type=password], select'); for (var i = 0; i < emptyInput.length; i++) { $(emptyInput[i]).closest('.form-group').removeClass('has-warning') if($(emptyInput[i]).val()=='' || $(emptyInput[i]).val()==null){ var div = $(emptyInput[i]).closest('.form-group').addClass('has-warning') return false; break; } } }); 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form action="" method="post" id="UserForm" class="form-horizontal"> <div class="modal-body"> <div class="form-group"> <label for="iUserName" class="col-sm-3 control-label">User Name</label> <div class="col-sm-9"> <input type="text" class="form-control" name="iUserName" id="iUserName" placeholder="User Name" value="" /> </div> </div> <div class="form-group"> <label for="iPassword" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iPassword" id="iPassword" placeholder="iPassword" value="" /> </div> </div> <div class="form-group"> <label for="iConfPassword" class="col-sm-3 control-label">Confirm Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iConfPassword" id="iConfPassword" placeholder="Confirm Password" value="" /> </div> </div> <div class="form-group"> <label for="iRoleSelect" class="col-sm-3 control-label">Role</label> <div class="col-sm-9"> <select class="form-control select2" id="iRoleSelect" name="iRoleSelect" style="width: 100%;"></select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-info pull-right">Save</button> </div> </form> 

尝试使用$符号。 工作示例:

 $('#UserForm').on('submit', function () { var flag_UserName, flag_Password, flag_Role var emptyInput = $('#UserForm').find('input[type=text], input[type=password], select').val(''); for (var i = 0; i < emptyInput.length; i++) { var div = $(emptyInput[i]).closest('.form-group').addClass('has-warning') console.log(div) } return false; }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" id="UserForm" class="form-horizontal"> <div class="modal-body"> <div class="form-group"> <label for="iUserName" class="col-sm-3 control-label">User Name</label> <div class="col-sm-9"> <input type="text" class="form-control" name="iUserName" id="iUserName" placeholder="User Name" value="" /> </div> </div> <div class="form-group"> <label for="iPassword" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iPassword" id="iPassword" placeholder="iPassword" value="" /> </div> </div> <div class="form-group"> <label for="iConfPassword" class="col-sm-3 control-label">Confirm Password</label> <div class="col-sm-9"> <input type="password" class="form-control" name="iConfPassword" id="iConfPassword" placeholder="Confirm Password" value="" /> </div> </div> <div class="form-group"> <label for="iRoleSelect" class="col-sm-3 control-label">Role</label> <div class="col-sm-9"> <select class="form-control select2" id="iRoleSelect" name="iRoleSelect" style="width: 100%;"></select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-info pull-right">Save</button> </div> </form> 

2 jQuery问题与addClass方法

预先感谢您的协助。 我很难完成一个非常简单的addClass方法案例。 我已经阅读了很多资源,但仍然无法弄清楚。 知道为什么这行不通吗? 我究竟做错了什么? 再次感谢你! -担 ...

3 addClass()jquery问题

所以这是我的代码,我按下按钮创建新的div。 我想把它们拖到www.trello.com上,但它们并没有动。 我认为addClass()不是我想要的功能所以我该怎么办? 按钮工作正常,但最少的代码没有 ...

4 jQuery .addClass问题

由于某种原因,.addClass方法未将该类添加到刚刚通过AJAX调用中的$(div).prepend方法添加到页面的内容中。 我首先从所有内容中删除了粗体格式,然后只想将新的粗体格式设置为粗体。 这是jQuery的特质,还是我缺少什么? 代码如下: } ...

5 jQuery中的addClass问题

我在jQuery中遇到选择器问题。 或者(我不认为)使用我的jQuery代码。 让我说说我的问题。 我有一个Rails项目,我想在菜单中插入“活动”类(如果菜单中当前页面相同)。 例如: 当前页面:帖子我的菜单: 页数(类别:无) 用户(类别:无) ...

7 jQuery中的addClass()removeClass()问题

你好朋友这里我的代码 jQuery的 HTML 我很困惑如何解决我的问题,实际上我想要一个简单的效果,当&lt;li&gt;背景颜色上的mouseenter()改变..但是当我使用嵌套列表时,它不能正常工作。 我想当用户将鼠标悬停在li时背景颜色会改变 请帮我 ...

8 基于URL的.addClass的jQuery / wordpress问题

我在将类添加到主题的2个导航链接时遇到一些问题。 当我将页面重定向到另一个页面时,我需要添加一个基于URL字符串的类。 我正在使用以下代码: 谁能看到为什么不起作用? 我收到以下错误: ...

10 jQuery自定义插件-AddClass问题

我正在尝试创建一个自定义JQuery插件,当单击锚元素时,它将显示一个适当的DIV块。 现在,我将插件称为“ Content Slider”。 我设法创建了插件并使它工作,以便在单击锚元素时显示适当的相应DIV。 但是,我还希望将CSS类应用于锚元素,以便在单击它后将其突出显示。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM