Как найти ближайший элемент с помощью jQuery

Я искал, поэтому я нашел так много примеров, но мой был немного отличается от всех.

1) Первоначально у меня есть строка, если пользователь нажмет кнопку save & next, он скажет, что у вас 3 поля отсутствуют

2) если пользователь нажимает кнопку addmore, и он не вводит никакого значения в текстовом поле, то он нажимает кнопку save и next, он все равно должен сказать, что 3 поля отсутствуют

3) если пользователь вводит какое-либо из полей в клонированной строке, он нажимает сохранить и следующая проверка кнопки должна произойти с моим кодом первые две точки работают

но проблема в том, что если пользователь нажмет еще несколько строк, и он введет любое из клонированного поля, то если он нажмет safe и next кнопка 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;
          });
        }

С моим текущим кодом я получаю ошибку.

Uncaught TypeError: не удается прочитать свойство "длина" неопределенного

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

красный цвет и красная граница применялись только для этого поля, а не для строки : (

Скрипка ссылка для справки

3 ответов


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

jQuery следующий, возможно, ответ для вас

описание: получите сразу после одноуровневый каждого элемента в наборе совпавших элементов. Если селектор предоставляется, он извлекает следующего брата, только если он соответствует этому селектору.

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


вы показываете знать ближайший поиск в дереве родителей и найти ближайший. Если вы хотите искать в братьях и сестрах, вы должны выполнить find on siblings.