JS循环内循环

Question

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

大众BORA 1.9TDI 1990 1995
奥迪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)
});

如果有课的话。用一个内容制作就可以了，但如果上课的话。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

首先，您希望在当前活动的中查找元素，但需要进行全局查找。要仅在当前范围内搜索，请执行以下操作：

var start = $(this).children('.start').text(); // same for .end/.name

您还需要将通过text（）检索到的值显式转换为如下数字：

for (var i = Number(start); i <= Number(end); i++) {
    // do stuff
}

此外，定义您迭代的变量而不仅仅是使用它们通常是一种很好的做法。

jQuery提供了一些非常好的实用程序来处理DOM元素，因此您不必使用字符串-如下所示：

var $div = $("<div>").text(name).addClass(i);
$("#content").append($div);

Answer 2

您无法确定jQuery必须在哪里查找其他元素，因此它会抓取所有元素。只需让他在父上下文中搜索start、end和name。

并使用html（）而不是text（）来仅获取元素内容。

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

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

    $("#content").html(html)
});

这应该行得通。

Answer 3

这对您很有用：请注意，$（“.class”）始终返回一个数组，因此在您的情况下，应该使用索引值逐个访问。

$('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>