How to wrap data dynamic data with Div using JQuery

laural4705 Source

I am teaching myself JQuery and have been trying to display my data in a carousel format. The data comes from a REST API. I am stuck and I believe I am just not thinking about the problem correctly, I am hoping someone can help me to understand.

The javascript code is as follows:

 function searchCallback(data) {
      if(debug_messages){console.log("json data loaded.");}

      // ===== Inject UL tag ===== //
      jQuery("#carousel").addClass( "carousel slide" ).attr('data-ride', 'carousel').append('<ul class="carousel-indicator">');

      // ===== Bring in Dynamic Data for Indicators ===== //
      var ws_ftr = data.ws_ftr.records;
      console.log(JSON.stringify(ws_ftr));
      jQuery.each(ws_ftr, function(index, ftr) {
           jQuery("#carousel>ul").append('<li data-target="carousel" data-slide-to="'+ftr[0]+'"></li>');
           jQuery(".carousel li:first").addClass("active");
      });

      // ===== Bring in Div to Surround Data ===== //
      jQuery("#carousel>ul").after('<div class="carousel-inner">');

      // ===== Bring in Dynamic Data for Content ===== //
      jQuery.each(ws_ftr, function(index, ftr) {
           jQuery(".carousel-inner").after('<div class="carousel-item">
           <img src="img/features_sliding/' + ftr[3] + '"/>');
           jQuery(".carousel-inner");
           jQuery(".carousel-item li:first").addClass("active");
      });
 };

The HTML generated should look like:

 <div id="carousel" class="carousel slide" data-ride="carousel">

 // ===== Inject UL tag ===== //
 <ul class="carousel-indicators">

      // ===== Bring in Dynamic Data for Indicators ===== //
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>

 </ul>

 // ===== Bring in Div to Surround Data ===== //
 <div class="carousel-inner">

      // ===== Bring in Dynamic Data for Content ===== //
      <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>

What I am getting is this, the div I bring in to surround the content does not:

 <div id="carousel" class="carousel slide" data-ride="carousel">

 // ===== Inject UL tag ===== //
 <ul class="carousel-indicators">

      // ===== Bring in Dynamic Data for Indicators ===== //
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>

 </ul>

 // ===== Bring in Div to Surround Data ===== //
 **<div class="carousel-inner"></div>**

      // ===== Bring in Dynamic Data for Content ===== //
      <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>
javascriptjquerycarousel

Answers

answered 3 months ago 83N #1

jQuery.each(ws_ftr, function(index, ftr) {
       jQuery(".carousel-inner").append('<div class="carousel-item"><img src="img/features_sliding/' + ftr[3] + '"/>');
  });
jQuery(".carousel-item li:first").addClass("active");

comments powered by Disqus