Как сделать что бы скрипт работал после другого скрипта?

Question

[kolykisel]

Приветствую всех,
У меня возник вопрос, есть у меня jplayer, со списком, надо сделать так что бы 4 песни были всегда, а остальные были скрыты, пока не нажмешь стрелку, в HTML у меня вот такой код

<div id="jquery_jplayer_16" class="jp-jplayer"></div>
                      <div id="jp_container_16" class="jp-audio">
                        <div class="jp-type-playlist">
                          <div class="jp-playlist">
                            <ul>
                              <li>&nbsp;</li>
                            </ul>
                          </div>
                          <div class="jp-gui jp-interface">
                            <div class="jp-row">
                              <div class="jp-current-time"></div>
                              <div class="jp-progress">
                                <div class="jp-seek-bar">
                                  <div class="jp-play-bar"></div>
                                </div>
                              </div>
                              <div class="jp-duration"></div>
                              <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                              </div>
                              <div class="jp-volume"></div>
                            </div>
                            <div class="jp-row-control">
                              <ul class="jp-controls">
                                <li><a href="javascript:;" class="jp-shuffle" tabindex="0"></a></li>
                                <li><a href="javascript:;" class="jp-previous" tabindex="0"></a></li>
                                <li><a href="javascript:;" class="jp-play" tabindex="0"></a></li>
                                <li><a href="javascript:;" class="jp-pause" tabindex="0"></a></li>
                                <li><a href="javascript:;" class="jp-next" tabindex="0"></a></li>
                                <li><a href="javascript:;" class="jp-repeat" tabindex="0"></a></li>
                                 <li><a href="javascript:;" class="jp-share" tabindex="0"></a></li>
                              </ul>
                            </div>
                            <div class="jp-no-solution">
                              <span>Update Required</span>
                              To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                            </div>
                          </div>
                        </div>
                      </div>

Так же вставляю песни через js, произвожу различные настройки

new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_16",
		cssSelectorAncestor: "#jp_container_16"
	}, [
	{
		title:"Linkin Park - One Step Closer",
		mp3:"music/13.mp3"
	},
	{
		title:"Linkin Park - Bleed It Out",
		mp3:"music/14.mp3"
	},
	{
		title:"Linkin Park - Faint",
		mp3:"music/15.mp3"
	},
	{
		title:"Linkin Park - One More Light",
		mp3:"music/16.mp3"
	}
	], {
		swfPath: "../js/",
		supplied: "oga, mp3",
		wmode: "window",
		useStateClassSkin: true,
		autoBlur: false,
		keyEnabled: true
	});

Так суть вопроса вот в чем, я хочу получить li массив из .jp-playlist, но он выдает только один li, так как в DOM, изначально только

<div class="jp-playlist">
 <ul>
  <li>&nbsp;</li>
 </ul>
</div>

Как мне сделать так, что бы, сначала я инициализировал плеер, произвел настройки, вставил песни, а только потом, сработал бы у меня этот скрипт:

$('.jp-playlist ul').each(function(i, el) {
  	console.log($(el).children('li'));
  });

И тогда бы я вытащил 4 элемента, так как в каждом плеере по 4 песни,

Comments

[Demigodd]

Document Ready

[kolykisel]

DEATH2298, у меня все мои скрипты находятся в $( document ).ready(function({"мои скрипты"})

[4mobile]

Использовать ивенты плеера, конечно, что-то типа этого $.jPlayer.event.loadeddata
поэкмпериментируйте

Answer 1

[dollar]

Примерно так:

let timer_wait_4 = setInterval(e=>{
  let arr = document.querySelectorAll(".jp-playlist ul li");
  if (!arr || arr.length < 4) return;
  clearInterval(timer_wait_4);

  $('.jp-playlist ul').each(function(i, el) {
    console.log($(el).children('li'));
  });

},200);

Но учтите, что это не самое элегантное решение, своеобразное, костыльное. Зато решение.

Answer 2

[EVG]

Воспользуйтесь MutationObserver, https://developer.mozilla.org/en-US/docs/Web/API/M... для отслеживания изменений DOM нужных элементов. Как только появятся нужные данные, заберете их.

Вариант 2 - создать кастомный вэб-компонент, и использовать его вместо тега ul, который будет наблюдать за изменениями в своем слоте, и опять же, как тотлько в слоте появятся нужные данные, забрать... Но наверное первый вариант уместнее будет.