сложности с использованием hasClass

249

04 февраля 2018, 03:10

Данный код проверяет элементы div c классом form-field на наличие у них так же класса false_validation. В проверке в первом console.log я вывожу результат элемента (true) если есть у него в списке класс false_validation и вывожу строку 'No class false_validation', если нет в списке классов этого класса. А во втором console.log я вывожу ВСЕ классы:

var ff = jQuery('div.form-field');
for (var i = 0; i < ff.length ; i++ ){
        if(ff.hasClass("false_validation")) {
           document.getElementsByClassName('form-field')[i].value = ''; // action
            if(ff.hasClass("false_validation")){
                console.log(ff.hasClass("false_validation")); // 1 console.log
            } else { console.log('No class false_validation');}
            console.log(ff[i].classList);                     // 2 console.log
        }
    }

Вывод консоли браузера:

true
(3) ["form-field", "form-name", "false_validation", value: "form-field form-name false_validation"]
true
(3) ["form-field", "form-tel", "false_validation", value: "form-field form-tel false_validation"]
true
(2) ["form-field", "form-city", value: "form-field form-city"]
true
(3) ["form-field", "form-email", "false_validation", value: "form-field form-email false_validation"]
true
(3) ["form-field", "form-password", "false_validation", value: "form-field form-password false_validation"]
true
(3) ["form-field", "form-password", "false_validation", value: "form-field form-password false_validation"]
true
(2) ["form-field", "form-accept", value: "form-field form-accept "]
true
(3) ["form-title", "form-field", "false_validation", value: "form-title form-field false_validation"]

Т.е. везде значение true!, даже если класса false_validation в списке классов у элемента нет!Во всех источниках пишут применение в hasClass в таком виде:

$('#say').hasClass('meow')

Подскажите, почему у меня это условие не срабатывает?

Answer 1

Все просто. В переменной ff у Вас хранятся все элементы, попадающие под селектор. Вы используете hasClass не на каждый элемент, а на коллекцию элементов и эта функция работает по-другому - то есть она в этой коллекции находит хотя бы 1 класс false_validation и выдает true. Ваш код можно переделать так, используйте цикл each для коллекции ff

var ff = jQuery('div.form-field'); 
ff.each(function(){ 
  var $this = $(this); 
 
  if($this.hasClass("false_validation")) { 
     $this.value = ''; // action 
     console.log($this.hasClass("false_validation")) 
  } else { 
     console.log('No class false_validation'); 
     console.log($this.classList);   
  } 
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form-field"></div> 
<div class="form-field"></div> 
<div class="form-field false_validation"></div> 
<div class="form-field"></div> 
<div class="form-field"></div>