Question

我正在教自己JQuery，并一直试图以旋转木马格式显示我的数据。数据来自REST API。我被卡住了，我相信我只是没有正确地思考问题，我希望有人可以帮助我理解。

javascript代码如下：

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

生成的HTML应如下所示：

 <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>

我得到的是这个，我带来的内容不包括：

 <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>

Answer 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");

如何使用JQuery使用Div包装数据动态数据

1 个答案: