时间戳

首页 > 解决方案 > li 元素是在 ul 中还是在 ul 之外？

jquery - li 元素是在 ul 中还是在 ul 之外？

问题描述

我的任务是创建一个包含 li 元素的 ul。

我不确定 li 元素是否真的在我的解决方案中的 ul 中。

如果不是，我如何创建一个 ul，然后在 ul 中插入 li 元素？

我只被允许更改 JS 文件。

所有帮助将不胜感激！

（我在下面包含了 html 代码和 js 代码。）

HTML：

    <!DOCTYPE html>
    <html lang="en">

    <head>
     <meta charset="UTF-8">
     <title>Uppgift 4 – Dynamiskt visade och dolda sidkomponenter</title>
     <link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>

    <body>
     <div class="container">
     <div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto">
        <h1 class="display-4">Husmanskost</h1>
        <p class="lead">Recept ur kokboken "Husmanskost – En hjälpreda för sparsamma 
    husmödrar" från 1896</p>
    </div>
    <div id="content" class="row">
        <div id="primarycontainer" class="col">
            <div id="primarycontent" class="p-3">
                <div class="post">
                    <h4>
                    Potatis, att imkoka
                </h4>
                    <div class="contentarea">
                        <p>
                            Bäst är att härtill hafva en särskild bleckkastrull, som är hålig i botten och passar att sätta öfver en kokande vattengryta.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Torra ärtskidor, att koka
                </h4>
                    <div class="contentarea">
                        <p>
                            Som dessa ärtskidor äro hårdkokta, böra de komma tidigt på elden, den dag de skola ätas. De kokas och stufvas som föregående.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Släpärter
                </h4>
                    <div class="contentarea">
                        <p>
                            En bra stor gryta sättes på elden half med vatten, och då detta kokar, iläggas 4 lit.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Spenat, stufvad
                </h4>
                    <div class="contentarea">
                        <p>
                            Väl rensad och sköljd spenat förvälles i kokande vatten med salt, hvarefter den i durkslag bör afrinna och sedan hackas.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Kålrötter, brynta
                </h4>
                    <div class="contentarea">
                        <p>
                            Rötterna skalas, skäras i klyftor och få koka som i föregående, men måste kallna innan de läggas i en stekpanna med fläskflott eller smör att brynas.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Rotslamp
                </h4>
                    <div class="contentarea">
                        <p>
                            Kålrötter kokas som i föregående är sagdt, men inemot dä äro.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Kålrabbi
                </h4>
                    <div class="contentarea">
                        <p>
                            Skala och skär sönder kålrabbi i strimlor, koka och stufva den som blomkål, men äggulorna kunna uteslutas.
                        </p>
                    </div>
                </div>
                <div class="post">
                    <h4>
                    Hvitkålshufvud, stekt
                </h4>
                    <div class="contentarea">
                        <p>
                            Ett stort hårdt kålhufvud afskäres alla gröna, skadade blad och med en smal, uddhvass knif bortskäres stocken. 
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="secondarycontent" class="col-lg-4 p-3 bg-light">
            <div id="receptmeny">
                <h4>Recept</h4>
                <div class="contentarea">

JS：

    $(document).ready(generateMenu);

    function generateMenu() {
     //Loopar igenom alla headers
     $.each($('.post h4'),function(index,value){
     //Lägger in headertexten i rätt div tag och klass
     $('#receptmeny').append("<ul id='newList'></ul>");
     $('#receptmeny .contentarea').append('<li><a href="#anchor- 
     '+index+'">'+$(this).html()+'</a></li>');
     //Lägger in headertag med motsvarande namn
     $(this).html('<a name="anchor-'+index+'">'+$(this).html()+'</a>');
      });
      }

标签： jquery

解决方案

推荐阅读