使用MySQL中的数据自动完成<ol>和<li> </li> </ol>

时间:2014-04-16 10:38:40

标签: javascript mysql loops

MySQL告诉我这个数据:

Datas from MySQL step 2

Datas from MySQL step 3

这是我的HTML代码:

<div id="chapitrage" >
   <ol id="liste_chapitre">
   </ol>
</div>

我需要在我的<ol id="liste_chapitre"> <ul>为每个&#34; Chapitres&#34;每个<ul>制作<li>每个&#34;视频&#34;每个&#34; Chapitres&#34;。

类似的东西:

<div id="chapitrage" >
            <ol id="liste_chapitre">
                <ul id="chap0">
                    <div>name_Chapitre[index0]</div>
                        <li>name_Video[index0]</li>
                        <li>name_Video[index1]</li>
                        <li>name_Video[index2]</li>
                </ul>
                <ul id="chap1">
                    <div>name_Chapitre[index1]</div>
                    <li>name_Video[index0]</li>
                    <li>name_Video[index1]</li>
                </ul>
                <ul id="chap2">
                    <div>name_Chapitre[index2]</div>
                        <li>name_Video[index0]</li>
                        <li>name_Video[index1]</li>
                        <li>name_Video[index2]</li>
                </ul>
            </ol>

我试过了,但它很糟糕......

$.each(e.valeur_tableau_infos_tutoriel.Chapitres, function (idx, chapitre) {
        $("#chapitrage #liste_chapitre").append("<ul>"+e.valeur_tableau_infos_tutoriel.Chapitres.titre_chapitre+"</ul>");
                $.each(chapitre.Videos, function (idx, video) {
                    $("#liste_chapitre ul").append("<li></li>");
                    $("#liste_chapitre ul li").append(e.valeur_tableau_infos_tutoriel.Chapitres.Videos);
                });
    });

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

这是解决方案:

$.each(e.valeur_tableau_infos_tutoriel.Chapitres, function (idx, chapitre) {
        $(".liste_chapitre").append("<li id='"+idx+"'><div>"+e.valeur_tableau_infos_tutoriel.Chapitres[idx].titre_chapitre+"</div><ul></ul></li>");
            $.each(chapitre.Videos, function (index, video) {

                $(".liste_chapitre li#"+idx+" ul").append(
                    "<li>"+
                        "<div class='titre'><span class='icon icon-play4'></span>"+video.titre+"</div>"+
                        "<div class='duree'>"+nbMinutes+"min "+nbSecondes+"s</div>"+
                        "<div class='niveau'><span class='icon icon-"+niv+"'></span></div>"+
                        "<div class='prix'>"+video.prix+"</div>"+
                    "</li>"
                );
        });
    });