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

Question

我在 SO 中搜索过，我发现了很多例子，但我的例子与所有例子都没有什么不同。

1) 最初我有一行如果用户点击保存和下一步按钮它会说你有 3 个字段丢失

2) 如果用户单击添加更多按钮并且他没有在文本字段中键入任何值然后他单击保存和下一步按钮它应该仍然说缺少 3 个字段

3) 如果用户在克隆行中键入任何一个字段，然后他单击保存，下一步按钮验证应该发生在我的代码中，前两点有效

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

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

我试过如下

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

~~我当前的代码出现错误。~~

~~未捕获类型错误：无法读取未定义的属性 '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"});

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

Fiddle link供参考

Answer 1

Jquery下一个也许就是适合您的答案

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

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

Answer 2

@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;
          });
        }

Answer 3

您在父树中显示知道最接近的搜索并找到最接近的搜索。如果你想在兄弟姐妹中搜索，你应该在兄弟姐妹上执行查找。

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

How to find the closest element using jquery

html

javascript

css

jquery

jquery-validate