locked
How to dynamically nest HTML<li> by javascript or jquery RRS feed

  • Question

  • User-775831949 posted

    I have a Bootstrap (or other) carousal plug in  making use of <li> like below
    However as you can see they are hard coded.
    The number of jpg is growing. The name is consistent growing from
    Q1 to Q2 to Q3... etc

    How can I dynamically cope with this ?

    <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      
      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="la.jpg" alt="Los Angeles" width="1100" height="500">
        </div>
        <div class="carousel-item">
          <img src="chicago.jpg" alt="Chicago" width="1100" height="500">
        </div>
        <div class="carousel-item">
          <img src="ny.jpg" alt="New York" width="1100" height="500">
        </div>
      </div>

    Tuesday, March 20, 2018 2:04 PM

Answers

  • User-1838255255 posted

    Hi hkbeer,

    According to your description and needs, you could dynamically append li through number  please check the following sample code:

    Sample Code: 

    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                var loop = ["value1", "value2", "value3"];
                for (var i = 0; i < loop.length; i++) {
                    var text = loop[i];
                        $('<li />', { html: text }).appendTo('ul.justList')
                }
            })
        </script>
    </head>
    <body>
        <ul class="justList"></ul>
    </body>

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 21, 2018 9:00 AM

All replies

  • User475983607 posted

    I have a Bootstrap (or other) carousal plug in  making use of <li> like below
    However as you can see they are hard coded.
    The number of jpg is growing. The name is consistent growing from
    Q1 to Q2 to Q3... etc

    How can I dynamically cope with this ?

    Dynamic HTML is the realm of ASP.NET or client side frameworks like React or jQuery.  Usually a data driven design where the client app sends a request to the server to fetch a result set from a database table.  The result is formatted in some way like HTML or JSON and sent to the client where the formatted data is displayed.

    Are you using a client side framework?  What kind of application is this; Web Forms, MVC?

    Tuesday, March 20, 2018 2:26 PM
  • User-775831949 posted
    I am using jquery.

    I have web form but I am also to see what can be done in non web server statics html page
    Wednesday, March 21, 2018 12:28 AM
  • User-1838255255 posted

    Hi hkbeer,

    According to your description and needs, you could dynamically append li through number  please check the following sample code:

    Sample Code: 

    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                var loop = ["value1", "value2", "value3"];
                for (var i = 0; i < loop.length; i++) {
                    var text = loop[i];
                        $('<li />', { html: text }).appendTo('ul.justList')
                }
            })
        </script>
    </head>
    <body>
        <ul class="justList"></ul>
    </body>

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 21, 2018 9:00 AM
  • User-775831949 posted

    Thanks a lot. It works.

    Wednesday, March 21, 2018 11:34 AM