javascript - 循环内的JS循环

您好，我对jquery没什么问题。
首先，我有：


  大众BORA 1.9TDI 1990 1995
  奥迪A3 2.0TFSI 2006 2008


但我想实现：


  大众BORA 1.9TDI 1990
  大众BORA 1.9TDI 1991
  大众BORA 1.9TDI 1992
  大众BORA 1.9TDI 1993
  大众BORA 1.9TDI 1994
  大众BORA 1.9TDI 1995
  奥迪A3 2.0TFSI 2006
  奥迪A3 2.0TFSI 2007
  奥迪A3 2.0TFSI 2008


HTML代码：

<div class="make">
   <div class="name">VW BORA 1.9TDI</div><div class="start">1990</div><div class="end">1995</div>
</div>
<div class="make">
   <div class="name">Audi A3 2.0TFSI</div><div class="start">2006</div><div class="end">2008</div>
</div>

JS代码：

$('div[class="make"]').each(function(index){
   var html = '';
   var start = $('.start').text();
   var end = $('.end').text();
   var name = $('.name').text();

   for (i=start; i<=end; i++) {
     html += '<div class="'+i+'">'+name+' '+i+'</div>';
   }
   $("#content").html(html)
});

如果有一个类.make带有一个内容就可以了，但是如果类.make出现了很多次并带有不同的内容，则所有内容放在一起，但是应该分开。

像这样：


  大众BORA 1.9TDIAudi A3 2.0TFSI 19902006
  大众BORA 1.9TDIAudi A3 2.0TFSI 19902007
  大众BORA 1.9TDIAudi A3 2.0TFSI 19902008
  大众BORA 1.9TDIAudi A3 2.0TFSI 19902009

最佳答案

这将为您工作：
请注意，$(".class")总是返回一个数组，因此，在您的情况下，您应该一个一个地访问它，并使用index值进行访问。

$('div[class="make"]').each(function(index){

   var html = '';
   var links = '';
   var start = parseInt($(this).find(".start").text());
   var end = parseInt($(this).find(".end").text());
   var name = $(this).find(".name").text();

   for (i=start; i<=end; i++) {
       html += '<div class="'+i+'">'+name+' '+i+'</div>';
   }
   $("#content").append(html)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
   <div class="name">VW BORA 1.9TDI</div><div class="start">1990</div><div class="end">1995</div>
</div>
<div class="make">
   <div class="name">Audi A3 2.0TFSI</div><div class="start">2006</div><div class="end">2008</div>
</div>
<br><br>
<div id="content"></div>

关于javascript - 循环内的JS循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37969310/