JQuery селектор для динамического построения HTML не работает

Question

Я хочу выбрать диапазон, который является билдом во время выполнения, используя jquery. Вот полученный код

<div id="phases">
 <div>
    <span class="phaseTimer">test</span>
 </div>
  <div>
     <span class="phaseTimer">test</span>
 </div>
 <div>
    <span class="phaseTimer">test</span>
</div>
  <div>
 <span class="phaseTimer">test</span>
 </div>
</div>

Я использую этот селектор jquery внутри $.each, чтобы выбрать диапазон

   $("div#phases div:nth-child("+(index+1)+") span.phaseTimer").text("Not started yet");

вот пример, который я хочу сделать, но селектор не правильный!http://jsfiddle.net/jaVB9/3/

РЕДАКТИРОВАТЬ Вот сценарий проблемы, с которой я сталкиваюсь

http://jsfiddle.net/jaVB9/6/

Answer 1

Это потому, что вы пытаетесь найти элемент перед его добавлением в DOM. Я исправил это в твоей скрипке, взгляни. Также вам не нужен селектор для этого, вы можете просто установить текст при создании необходимой разметки.

    var allPhases="";

    $.each(phasesData,function(index){
        var startDate = new Date(phasesData[index].startDate);
        var endDate = new Date(phasesData[index].endDate);

        if(phasesData[index].isCurrent=="true"){
            var elapsed_seconds =endDate-startDate;
            allPhases+="<div><span class=\"phaseTimer\">test</span></div>";
            setInterval(function() {
                elapsed_seconds = elapsed_seconds - 1000;
                $("div#phases div:nth-child("+(index+1)+") span.phaseTimer")
                .text(getElapsedTimeStrFormat(elapsed_seconds))
            }, 1000);
        }
        else if(phasesData[index].isCurrent=="false"){
            allPhases+="<div><span class=\"phaseTimer\">"+startDate+"</span></div>";
        }
    });


$("div#phases").html(allPhases);

http://jsfiddle.net/jaVB9/9/