如何使用jquery查找最近的元素

Question

我在SO上搜索了很多例子，但我的情况与所有例子都有所不同。

1）最初我有一行，如果用户点击“保存并下一步”按钮，它会说您有3个字段缺失

2）如果用户单击“添加更多”按钮，并且他没有在文本字段中键入任何值，然后单击“保存并下一步”按钮，则仍应显示3个字段缺失

3）如果用户在克隆的行中键入任何一个字段，然后单击“保存并下一步”按钮，则应首先使用我的代码进行验证，前两个点都有效

但问题是，如果用户单击了更多行并在其中任何一个克隆字段中键入，则如果他单击安全和下一步按钮，则required_Field类将应用于所有其他字段，但它只应该适用于那一行:(

如果我们能够找到用户键入字段的最接近元素，那么我就可以将required_Field类仅添加到这些元素中

我尝试像下面这样

        function additionalvalidation() {
          var myRow = $(".check").length;

          //$(".cloned_field").css("border","1px solid green");
          $(".cloned_field").change(function() {
                var myField = $(".cloned_field").val().length;
            if (myField >= 0) {
              $(".cloned_field").addClass("required_Field");
              debugger;
              $(".cloned_field").prevAll('label').find('span.required-star').removeClass('text-error-red');
              //bind_validation();
            } else {
              $(this).closest(".cloned_field").removeClass("errRed");
              $(".cloned_field").removeClass("text-error-red");
            }
            bind_validation();
            return false;
          });
        }

我的代码出现了错误。

未捕获的 TypeError: 无法读取未定义的属性“length”。

$(this).closest(".cloned_field").addClass("required_Field");

我也尝试了这个方法

$(this).closest(".cloned-row1").addClass("required_Field");

任何关于这个问题的建议？

我尝试了这个新的 ->

$(this).closest(".cloned_field").css({"color": "red", "border": "2px solid red"});

红色和红色边框仅适用于该字段，而不适用于整行:(

参考链接

- Mr.M

---

请添加您的HTML。 - Mohan

@Barmar 谢谢你的回复，可以请你更新一下最后一点吗？同时麻烦你也检查一下第三点。我只想为那一行添加 required_field 类而不是所有克隆行都加上 :( - Mr.M

@Barmar 我已经更新了这个代码片段，请查看第三点。 - Mr.M

但是 bind_validation 只会为具有该类的字段添加验证。 - Barmar

@RayonDabre 有什么建议吗？ - Mr.M

Answer 1

@mahadevan 试试这段代码。我正在工作。

        function additionalvalidation() {
          var myRow = $(".check").length;

          //$(".cloned_field").css("border","1px solid green");
          $(document).on("change",".cloned_field",function() {
          var myField = $(this).val();
          var $clonedDiv  = $(this).closest('.cloned_div');

            if (myField!='') {     
                $clonedDiv.find(".cloned_field").addClass("required_Field");
                $clonedDiv.find(".deg_date").addClass("required_Field");
                $clonedDiv.find(".trans_date").addClass("required_Field");
                $clonedDiv.find(".txt_degreName").addClass("required_Field");


              debugger;
              $(".cloned_field").prevAll('label').find('span.required-star').removeClass('text-error-red');
              //bind_validation();
            } else {
                $clonedDiv.find(".cloned_field").removeClass("errRed");
                $clonedDiv.find(".deg_date").removeClass("errRed");
                $clonedDiv.find(".trans_date").removeClass("errRed");
                $clonedDiv.find(".txt_degreName").removeClass("errRed");

                //$(".cloned_field").removeClass("text-error-red");
            }
            bind_validation();
            return false;
          });
        }

- Vel

Answer 2

Jquery next或许是你的答案

描述：获取匹配元素集合中每个元素紧邻的后续同级元素。如果提供了选择器，则仅检索与该选择器匹配的下一个同级元素。

https://api.jquery.com/next/

- Atilla Arda Açıkgöz

---

使用以下代码，仅为当前字段工作而不是该行。$(this).closest(".cloned_field").css({"color": "red", "border": "2px solid red"}); - Mr.M

我正在从工作回家的路上。等我回到家，我会更深入地检查你的问题。坚持住 :) - Atilla Arda Açıkgöz

Answer 3

你应该知道如何在父级树中查找最接近的搜索结果，并找到最接近的一个。如果你想在兄弟节点中进行搜索，你应该在兄弟节点上执行查找操作。

- MSS