javascript - JS 循环内循环

Question

你好，我对 jquery 没有什么问题。 首先，我有:

VW BORA 1.9TDI 1990 1995
Audi A3 2.0TFSI 2006 2008

但我想实现:

VW BORA 1.9TDI 1990
VW BORA 1.9TDI 1991
VW BORA 1.9TDI 1992
VW BORA 1.9TDI 1993
VW BORA 1.9TDI 1994
VW BORA 1.9TDI 1995
Audi A3 2.0TFSI 2006
Audi A3 2.0TFSI 2007
Audi 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)
});

如果 class .make 只包含一个内容，那没问题，但如果 class .make 多次出现且包含不同的内容，则所有内容都放在一起，但应该分开。

像这样:

VW BORA 1.9TDIAudi A3 2.0TFSI 19902006
VW BORA 1.9TDIAudi A3 2.0TFSI 19902007
VW BORA 1.9TDIAudi A3 2.0TFSI 19902008
VW BORA 1.9TDIAudi A3 2.0TFSI 19902009

Answer 1

这对你有用: 请注意，$(".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>