用于动态html构建的jquery选择器不起作用

时间:2012-02-01 18:44:05

标签: jquery jquery-selectors

我想使用jquery在运行时选择bild的span 这是结果代码

<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>

我在$.each中使用此jquery选择器来选择范围

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

这是我想要的例子,但选择器不正确! http://jsfiddle.net/jaVB9/3/

修改 这是我面临的问题的情景

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

1 个答案:

答案 0 :(得分:2)

这是因为您在将元素添加到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/