jquery在列表中查找下一个类

yeotifhr 于 2023-06-22 发布在 jQuery

关注(0)|答案(4)|浏览(131)

我知道这个问题已经被问过几次了，但似乎没有一个答案是有效的，或者至少我已经发现了。
我需要从表单输入中检查输入后从列表项中选择错误类。
这是我的：
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;
}
});

上面的确实有效，我只是想知道是否有比使用更好的选择“error”类的方法：

$(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();

有别的解决办法吗？我是不是错过了什么简单的东西？

jquery

来源：https://stackoverflow.com/questions/24946273/jquery-find-next-class-in-a-list

4条答案

按热度按时间

3bygqnnd1#

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

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

赞(0）回复(0）举报 2023-06-22

a11xaf1n2#

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添加到现有< li/>或
将display：block添加到错误和/或图标。

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

赞(0）回复(0）举报 2023-06-22

qij5mzcb3#

.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中，这样可以让选择器更简单。

赞(0）回复(0）举报 2023-06-22

qaxu7uf24#

如果你不介意改变标记，你可以把你的li组分组在单独的列表中，就像这样：

<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();

赞(0）回复(0）举报 2023-06-22

我来回答

jquery在列表中查找下一个类

4条答案

相关问题

热门标签

最新问答