Question

我知道这个问题已被问过几次但是没有一个答案似乎有效，或者至少我已经找到了。

在检查表单输入的输入后，我需要从列表项中选择错误类。

这就是我所拥有的：

html：

 <ul>
    <li class="label"><label>Label</label></li>
    <li class="input"><input name="fname" type="text" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>

    <li class="label"><label>Label</label></li>
    <li class="input"><input name="lname" type="text" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>

    <li class="label"><label>Label</label></li>
    <li class="input"><input name="uname" type="text" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>

    <li class="label"><label>Label</label></li>
    <li class="input"><input name="password" type="password" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>
 </ul>

jQuery：

$('input[name=uname]').on("input", function() {

var input = $.trim(this.value);
var BLIDRegExpression = /^[a-zA-Z0-9]+$/;

if(input == 0){
    uname_status = false;
    $(this).closest('li').next('.icon').html('<img src="/assets/images/png/glyphicons_199_ban.png" />');
    $(this).parent('li').next().next().next('li').show(); 
    $(this).parent('li').next().next().next('li').html('<span>You must enter a Username!</span>');
    return false;
}
});

以上确实有效，我只是想知道是否有更好的方法来选择＆＃34;错误＆＃34;比使用类：

    $(this).parent('li').next().next().next('li').show();

我尝试了以下内容但他们没有工作：

// From another stackoverflow question
$(this).closest('li').nextAll(':has(.error):first').find('.error');

$(this).parents('li').eq(0).next().find('li.error');

// Works but selects the next error class' and the one after
$(this).closest('li').nextAll('li.error').show();  
or
$(this).parent('li').nextAll('li.error').show();

还有其他解决方案吗？我只是缺少一些简单的东西吗？

Answer 1

尝试使用nextAll()并过滤结果以获得first()，如下：

$('input[name=uname]').on("input", function() {
    ......
    $(this).parents(".input")
        .nextAll(".error").first().html('<span>You must enter a Username!</span>');
})

Answer 2

1）这种结构有多严格？如果您对表单字段进行分组，您将获得更好的控制和运气：

<ul class="form-field">
 <li class="label"><label>Label</label></li>
 <li class="input"><input name="fname" type="text" /></li>
 <li class="icon"></li>
 <li class="clearfix"></li>
 <li class="error"></li>
</ul>

或者更像Twitter Bootstrap：

<div class="form-group">
 <label for="Input1">Lable</label>
 <input name="fname" type="text" class="form-control" id="Input1"/><i class="icon"></i>
 <div class="error"></div>
</div>

使用其中任何一项，任何项目的父项都只包含相关的兄弟姐妹。

2）如果您没有直接更改的自由，请尝试使用唯一的类名称动态分组元素：http://jsfiddle.net/2Kquq/4/（通过单击操作更新）

3）clearfix li似乎是不必要的代码。您可以通过

获得明确的信息

对父级中的元素进行分组（如上面的＃1）或
将clearfix添加到现有＆lt;里/＆GT;或
将display：block添加到您的错误和/或图标中。

4）如果你只需要使用这个标记，你可以尝试nextUntil（“。error”）。next（）来选择下一个错误div。

Answer 3

.nextAll()可能就是你想要的

$('input[name=uname]').on("input", function() {

var input = $.trim(this.value);
var BLIDRegExpression = /^[a-zA-Z0-9]+$/;

if(input == 0){
    uname_status = false;
    $(this).parent('li').next('.icon').html('<img src="/assets/images/png/glyphicons_199_ban.png" />');
    var $nextError = $(this).parent('li').nextAll('error:first');
    $nextError.html('<span>You must enter a Username!</span>'); 
    $nextError.show();
    return false;
}
});

我很好奇你为什么不将它们放在单独的ul中，尽管这会使选择器变得更简单。

Answer 4

如果您不介意更改标记，可以将li-groups分组到单独的列表中，如下所示：

<ul>
<li class="label"><label>Label</label></li>
<li class="input"><input name="fname" type="text" /></li>
<li class="icon"></li>
<li class="clearfix"></li>
<li class="error"></li>
</ul>
<ul>
<li class="label"><label>Label</label></li>
<li class="input"><input name="lname" type="text" /></li>
<li class="icon"></li>
<li class="clearfix"></li>
<li class="error"></li>
</ul>
<ul>
<li class="label"><label>Label</label></li>
<li class="input"><input name="uname" type="text" /></li>
<li class="icon"></li>
<li class="clearfix"></li>
<li class="error"></li>
</ul>
<ul>
<li class="label"><label>Label</label></li>
<li class="input"><input name="password" type="password" /></li>
<li class="icon"></li>
<li class="clearfix"></li>
<li class="error"></li>
</ul>

然后你可以简单地去找

$(this).parent('ul').find('.error').show();

jquery在列表中查找下一个类

4 个答案: