コンテナ内のdivの数に基づいてスパンのリストをアセンブルする方法

Question

私はjqueryを初めて使うので、コンテナ内のdivの数に基づいて一連のスパン要素を作成する方法を理解できません。私はjquery.flowプラグインを使用して、自分のサイトのページにスライダを作成しようとしています。私のCMSはdivのすべての画像を取り除きますが、必要なスパン要素を自動的に作成したいと思います。私はこの動的にしようとしている、ユーザーが必要な数のスライダー画像を作成することができます。コードの構造は次のとおりです。

<div id="myController"> 
<span class="jFlowControl">No 1 </span> 
<span class="jFlowControl">No 2 </span> 
<span class="jFlowControl">No 3 </span> 
<span class="jFlowControl">No 4 </span> 
</div> 

<div id="mySlides"> 
<div>First Slide</div> 
<div>Second Slide </div> 
<div>Third Slide </div> 
<div>Fourth Slide </div> 
</div> 

私はコンテナdiv内のdivのリストを簡単に生成できます。私は各divの1つのスパンを追加するjqueryを書くつもりです。 4つのdivがある場合、スクリプトは4つのスパンを作成します。 10個のdivがある場合、スクリプトは10スパンを作成します。

ありがとうございました！

Answer 1

試してみてください。

$('#mySlides div').each(function(index){ 
     $('#myController').append(
      $('<span class="jFlowControl">No ' + (index+1) + ' </span>') 
    ); 
}); 

参照：以下は動作するはずhttp://jquery.nodnod.net/cases/606

Answer 2

何かのように。

for (i = 0; i < $("#container div").length; i++) { 
    $("#myController").append("<span class=\"jFlowControl\">No " + (i + 1) + "</span>"); 
} 

Answer 3

Thedzとマックス・シュメリングソリューションの両方の仕事、しかし：これは画像の量が非常に大きな可能性が動的システムのためであることから、パフォーマンスの問題に気を付けます。テストでは、htmlインジェクションがブラウザ上で重いことが証明されています。だから、最初に注入しなければならないすべてのhtmlを連結して、1回の注入だけを試みてください。連結が文字列連結または配列結合を介して行われるべきかどうかの議論があります。要するに、注入されるhtmlに依存するので、各解決策が実行される時間をファイアバグでテストします。単純な文字列の連結の例を次に示します。

var imageSpans = ''; 
$('#mySlides div').each(function(index){ 
    imageSpans += '<span class="jFlowControl">No ' + (index+1) + ' </span>';  
}); 
$('#myController').append(imageSpans);