[英]JQuery .next() not picking up next element with selector
我已经看过有关.next()
方法的JQuery
文档,它指出:
给定一个表示一组DOM元素的jQuery对象,.next()方法允许我们在DOM树中搜索这些元素的紧随其后的同级结构,并从匹配的元素构造一个新的jQuery对象。
该方法可选地接受与我们可以传递给$()函数的类型相同的选择器表达式。 如果紧随其后的同级匹配选择器,则它将保留在新构造的jQuery对象中; 否则,将其排除在外。
我试图像这样在div中定位一个元素:
$("input[name='first-name'").keyup(function () {
if (!name($(this).val())) {
$(this).parent().next(".fa-times").removeClass('hide');
$(this).parent().next(".fa-check").addClass('hide');
$(this).css({
"background": "rgb(237, 209, 209)",
"color": "red",
"border": "1px solid red"
});
} else {
$(this).parent().next(".fa-times").addClass('hide');
$(this).parent().next(".fa-check").removeClass('hide');
$(this).css({
"background": "rgb(209, 237, 209)",
"color": "green",
"border": "1px solid green"
});
}
});
标记如下:
<div class="col-md-6">
<label class="control-label">First Name</label>
<div id="fname-input">
<span class="wpcf7-form-control-wrap first-name">
<input type="text" name="first-name" value="" size="40" maxlength="80" minlength="2" aria-required="true" aria-invalid="false>
</span>
<i class="fa fa-times hide"></i>
<i class="fa fa-check hide"></i>
</div>
</div>
在这两种情况下,我都可以使用以下行从fa-times
中删除类隐藏:
$(this).parent().next(".fa-times").removeClass('hide');
但是由于某种原因,我无法接受fa-check
。 我想知道是因为这个:
如果紧随其后的同级匹配选择器,则它将保留在新构造的jQuery对象中; 否则,将其排除在外。
如果是这样,任何人都可以向我建议我要去哪里,以及在进行类fa-check
使用fa-check
检测下一个元素的最佳方法。
我现在正在使用JS小提琴,将在工作后尽快发布。
因为fa-check
不是下一个同级输入的父元素。 您可以使用.siblings()或.nextAll()
.next()不会获取与给定选择器匹配的下一个兄弟姐妹,它将仅搜索下一个兄弟元素,然后检查是否与给定选择器匹配。
$(this).parent().nextAll(".fa-check").removeClass('hide');
$(this).parent().siblings(".fa-check").removeClass('hide');
由于.fa-check
不是立即的下一个元素,因此无法使用next()
获取该元素。
next()
:
获取匹配的元素集中每个元素的紧随其后的同级 。 如果提供了选择器,则仅当与该选择器匹配时才检索下一个同级。
使用siblings()
获取正确的元素。
$(this).parent().siblings(".fa-times").removeClass('hide');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.