Почему некорректно срабатывает функция .hasClass?

Question

[Вячеслав Боргомотов]

Помогите разобраться: Есть простенький код:

<div class="nextstep">
  <div class="next"><span>1</span></div>
  <div class="next active"><span>2</span></div>
  <div class="next"><span>3</span></div>
  <div class="next active"><span>4</span></div>
</div>

и к нему простой скрипт:

if ($('.nextstep .next').hasClass('active')) {
    $('.nextstep .next').find('span').addClass('yes');
  } else {
    $('.nextstep .next').find('span').addClass('no');
  };

Вроде логика проста: Если у блока есть класс active, то к элементу добавить класс. Но почему он не проверяет, а просто добавляет всем. Что я делаю не так? Объясните пожалуйста?

Comments

[0xD34F]

не корректно

"некорректно"

Всем добрый вечер.

3.4

простой скрипт

Во-первых, твоя субъективная оценка сложности никому тут не интересна. Во-вторых, она ложная - будь этот код для тебя действительно простым, сам бы разобрался, где накосячил.

Что я делаю не так?

Рыпаешься что-то делать не прочитав документацию. Ты не знаешь, что делает метод hasClass (то же касается и find, и addClass). Открой документацию и разберись.

[imko]

Если я правильно понял чего ты достичь пытаешься то это вообще одним цсс селектором решается

[Вячеслав Боргомотов]

0xD34F, Спасибо за поправки. Все исправил!
Блин я же просто проверяю, он находит и добавляет класс!

[Вячеслав Боргомотов]

0xD34F, Пошел думать!

[Вячеслав Боргомотов]

imko, да, но необходимо проверить через script

Answer 1

[Владимир Римидалв]

$('.nextstep .next')

- вернет все html элементы с такими классами
дальше ты работаешь со списком как с одним элементом, ожидаешь что код будет разбирать составляющие списка по отдельности

$(document).ready(function() {
       // проходим наши элементы циклом
	$('.nextstep .next').each(function(i, obj) {
		// проверяем условия для каждого элемента отдельно
		if ($(obj).hasClass('active')) {
			// применяем классы к соответствующему спану
			$(obj).find('span').addClass('yes');
		} else {
			$(obj).find('span').addClass('no');
		};
	});
});

Comments

[Вячеслав Боргомотов]

Спасибо. Я почти додумался до цикла. Пошел читать про .each

Answer 2

[Сергей delphinpro]

Ваш код по сути просто переключает класс.
Это пишется в одну строку:

$('.nextstep .next').toggleClass('active');

Comments

[Вячеслав Боргомотов]

Код для примера. Нужно было js. Спасибо