jQuery .next()不使用选择器拾取下一个元素

爪哇卡达布拉

我查看了JQuery与该.next()方法有关的文档,该文档指出:

给定一个表示一组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

我现在正在使用JS小提琴,将在工作后尽快发布。

阿伦·P·约翰尼(Arun P Johny)

因为fa-check不是下一个同级输入的父元素。您可以使用.siblings()或.nextAll()

.next()不会获取与给定选择器匹配的下一个兄弟姐妹,它将仅搜索下一个兄弟元素,然后检查是否与给定选择器匹配。

$(this).parent().nextAll(".fa-check").removeClass('hide');
$(this).parent().siblings(".fa-check").removeClass('hide');

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

获取与jQuery中的选择器匹配的下一个元素

来自分类Dev

如何使用jQuery或CSS在特定元素之前获取下一个元素

来自分类Dev

jQuery选择下一个相似的元素

来自分类Dev

jQuery下一个兄弟姐妹选择器(“上一个〜兄弟姐妹”)

来自分类Dev

使用Bootstsrap Jquery在日期选择器中将下一个和上一个月替换为下一个和前一天

来自分类Dev

如何获取下一个元素jQuery的ID?

来自分类Dev

jQuery:如何获取下一个元素的名称

来自分类Dev

使用表时,jQuery Next()无法正确突出显示下一个元素

来自分类Dev

如何使用jQuery查找下一个元素?

来自分类Dev

如何使用jquery在html中获取下一个连续的相似标签

来自分类Dev

jQuery在下一个元素内选择一个嵌套元素

来自分类Dev

jQuery选择一个类和该类的“下一个”元素

来自分类Dev

jQuery选择器查找最后一个元素

来自分类Dev

当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

来自分类Dev

选择HTML元素Jquery之后的下一个span元素

来自分类Dev

在 jQuery 中选择下一个“选择”项

来自分类Dev

jQuery .next()选择全部,而不仅仅是下一个

来自分类Dev

jQuery删除下一个div元素的下一个

来自分类Dev

最近/下一个div选择jQuery

来自分类Dev

jQuery选择下一个类

来自分类Dev

jQuery选择下一个表行的UNIQUE

来自分类Dev

jQuery选择下一个文本输入值

来自分类Dev

最近/下一个div选择jquery

来自分类Dev

用jquery选择下一个div?

来自分类Dev

JQuery - 选择下一个 tr

来自分类Dev

在jQuery中查找下一个元素

来自分类Dev

jQuery循环-从下一个元素继续

来自分类Dev

下一个元素的jQuery setInterval

来自分类Dev

遍历到下一个输入元素-JQuery

Related 相关文章

  1. 1

    获取与jQuery中的选择器匹配的下一个元素

  2. 2

    如何使用jQuery或CSS在特定元素之前获取下一个元素

  3. 3

    jQuery选择下一个相似的元素

  4. 4

    jQuery下一个兄弟姐妹选择器(“上一个〜兄弟姐妹”)

  5. 5

    使用Bootstsrap Jquery在日期选择器中将下一个和上一个月替换为下一个和前一天

  6. 6

    如何获取下一个元素jQuery的ID?

  7. 7

    jQuery:如何获取下一个元素的名称

  8. 8

    使用表时,jQuery Next()无法正确突出显示下一个元素

  9. 9

    如何使用jQuery查找下一个元素?

  10. 10

    如何使用jquery在html中获取下一个连续的相似标签

  11. 11

    jQuery在下一个元素内选择一个嵌套元素

  12. 12

    jQuery选择一个类和该类的“下一个”元素

  13. 13

    jQuery选择器查找最后一个元素

  14. 14

    当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

  15. 15

    选择HTML元素Jquery之后的下一个span元素

  16. 16

    在 jQuery 中选择下一个“选择”项

  17. 17

    jQuery .next()选择全部,而不仅仅是下一个

  18. 18

    jQuery删除下一个div元素的下一个

  19. 19

    最近/下一个div选择jQuery

  20. 20

    jQuery选择下一个类

  21. 21

    jQuery选择下一个表行的UNIQUE

  22. 22

    jQuery选择下一个文本输入值

  23. 23

    最近/下一个div选择jquery

  24. 24

    用jquery选择下一个div?

  25. 25

    JQuery - 选择下一个 tr

  26. 26

    在jQuery中查找下一个元素

  27. 27

    jQuery循环-从下一个元素继续

  28. 28

    下一个元素的jQuery setInterval

  29. 29

    遍历到下一个输入元素-JQuery

热门标签

归档