Как передать значения переменной ребенку через родителя?

Question

[Lilliput]

Есть некий слайдер в котором я определяю количество слайдов. Мне необходимо это значение вывести в элемент по ID (totalSlides). Но загвоздка в том, что таких слайдеров на странице несколько, потому инициализировать вывод значения необходимо по родителю (item).

Пишу вот такой скрипт, переменная считает кол-во верно, но значение не выводит.

$(document).ready(function() {
let numItems = $(".w-slider-dot").length;
$(this).parents('.item').find('#totalSlides').text(numItems);
});

Answer 1

[I'm Yoda]

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

Comments

[Lilliput]

Проблема не в инициализации кол-ва, а в передаче

[I'm Yoda]

Lilliput, а у вас один элемент с id="totalSlides"?

[Lilliput]

I'm Yoda, их несколько, как и слайдеров, потому и затык в реализации. Получается внутри родителя с классом item мне необходимо выполнить let numItems = $(".w-slider-dot").length; и потом внутри этого же родителя найти ребенка .find('#totalSlides') и передать ему значение.

[I'm Yoda]

Lilliput, на странице не должно быть элементов с одинаковыми id! Для элемента id должен быть уникальным. Попробуйте задать разные id для элементов #totalSlides1, #totalSlides2, #totalSlides3. Как то так.

[Lilliput]

I'm Yoda, это вывод объектов в цикле, можно инициализировать по классу, но суть задачи это не меняется

[I'm Yoda]

Lilliput, приложите верстку, в нужных местах укажите классы "ВЗЯТЬ ЭТО", "ВСТАВИТЬ СЮДА".

[I'm Yoda]

Lilliput, сразу не обратил внимания на js)

$(document).ready(function() {
          let numItems = $(".w-slider-dot").length;
          $(this).parents('.item').find('#totalSlides').text(numItems);
});

$(this).parents('.item').find('#totalSlides').text(numItems);

Вы для начала посмотрите что у вас в $(this) попадает)

[Lilliput]

I'm Yoda,

<div class="item"> <!-- общий родитель, таких блоков с данным родителей и слайдерами внутри на странице несколько в цикле -->
	<div class="item_slider">
		<div class="slider w-slider">
			<div class="w-slider-mask" id="w-slider-mask-0">
				<div class="w-slide">
					<img src="http://..." alt="" class="full_img">
				</div>
				<div class="w-slide">
					<img src="http://..." alt="" class="full_img">
				</div>
			</div>
			<div class="w-slider-nav w-round">
				<div class="w-slider-dot w-active">
				</div>
				<div class="w-slider-dot"> <!-- взять значение по кол-ву элементов данного класса, внутри родителя .item -->
				</div>
			</div>
		</div>
	<div class="slider_track">
		<div class="countertext">5</div> <!-- ставить сюда, опять же внутри родителя .item -->
	</div>
</div>

[Pashok Doom]

$('.item').each(function(){
	$(this).find('#totalSlides').text($(this).find('.w-slider-dot').length);
})

Что-то в духе такого не прокатит?

[Lilliput]

Pashok Doom, хм, при инициализации на странице выводит нули, при инициализации в консоли выводит нужные значения. Как так то

[I'm Yoda]

Lilliput, ну так у вас скрипт срабатывает раньше чем слайдер создаётся. Какой слайдер используете?

[Lilliput]

I'm Yoda, тут скорее даже не в слайдере дело, он срабатывает до обработки цикла, в котором формируются слайды из БД. Но задача ясна, всем спасибо!