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

Question

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>对于每个“Chapitres”，在这个中每个 <ul>制作<li>对于每个“章节”中的每个“视频”。

类似的事情:

<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);
                });
    });

感谢您的帮助!

Answer 1

这是解决方案:

$.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>"
                );
        });
    });