javascript - 使用 jquery 和数组填充 html 列表

Question

我有这个产品列表，我正尝试使用 jQuery 填充它。

由于仅在 HTML 上执行此操作，因此每个元素都需要大量工作和非常非常长的代码行。这是我的示例 HTML 代码。

<li>
  <div class="col-md-4">
    <div class="acs-detail">
      <legend>Side Visor</legend>
      <img src="img/side_visor.jpg" class="veh-content img-responsive" />
      <div class="pna-description col-md-12">
        <ul>
          <li>Keeps the rain out and fresh air in with these durable side visors.</li>
        </ul>
      </div>
      <div class="pna-price col-sm-6 col-md-12">
        <div class="text-deco">
          <span>P 700 <a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."><sup>[*]</sup></a></span>
        </div>
        <div class="border">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</li>

我需要填充的是:

• <legend>
• <img src= "">
• .pna-description ul li
• span

Answer 1

我会用这样的东西:

array.forEach(function (current) {
  var legend     = current[0],
      imgSrc     = current[1],
      descript   = current[2],
      price      = current[3];
  $('ul.the-list').append(`
    <li>
      <div class="col-md-4">
        <div class="acs-detail">
          <legend>` + legend + `</legend>
          <img src="` + imgSrc + `" class="veh-content img-responsive" />
          <div class="pna-description col-md-12">
            <ul>
              <li>` + descript + `</li>
            </ul>
          </div>
          <div class="pna-price col-sm-6 col-md-12">
            <div class="text-deco">
              <span>` + price + `</span>
            </div>
            <div class="border">
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </li>
  `);
});

像这样的数组:

array = [
      [
      'Side Visor',
      'img/side_visor.jpg',
      'Keeps the rain out and fresh air in with these durable side visors.',
      'P 700 <a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."><sup>[*]</sup></a>',
      ],
      //more items
 ]

array = [
  [
  'Side Visor',
  'img/side_visor.jpg',
  'Keeps the rain out and fresh air in with these durable side visors.',
  'P 700 <a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."><sup>[*]</sup></a>',
  ],
  [
  'Side Visor',
  'img/side_visor.jpg',
  'Keeps the rain out and fresh air in with these durable side visors.',
  'P 700 <a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."><sup>[*]</sup></a>',
  ],
  [
  'Side Visor',
  'img/side_visor.jpg',
  'Keeps the rain out and fresh air in with these durable side visors.',
  'P 700 <a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."><sup>[*]</sup></a>',
  ],
]

array.forEach(function (current) {
  var legend     = current[0],
      imgSrc     = current[1],
      descript   = current[2],
      price      = current[3];
  $('ul.the-list').append(`
    <li>
      <div class="col-md-4">
        <div class="acs-detail">
          <legend>` + legend + `</legend>
          <img src="` + imgSrc + `" class="veh-content img-responsive" />
          <div class="pna-description col-md-12">
            <ul>
              <li>` + descript + `</li>
            </ul>
          </div>
          <div class="pna-price col-sm-6 col-md-12">
            <div class="text-deco">
              <span>` + price + `</span>
            </div>
            <div class="border">
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </li>
  `);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='the-list'>
</ul>