循环内的JS循环答案

【问题标题】：JS Loop inside the loop循环内的JS循环
【发布时间】：2016-06-22 13:19:39
【问题描述】：

你好，我对 jquery 有一点问题。首先，我有：

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

但我想实现：

大众宝来 1.9TDI 1990
大众宝来 1.9TDI 1991
大众宝来 1.9TDI 1992
大众宝来 1.9TDI 1993
大众宝来 1.9TDI 1994
大众宝来 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)
});

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

像这样：

大众宝来1.9TDIA奥迪A3 2.0TFSI 19902006
大众宝来 1.9TDI奥迪 A3 2.0TFSI 19902007
大众宝来 1.9TDI奥迪 A3 2.0TFSI 19902008
大众宝来1.9TDI奥迪A3 2.0TFSI 19902009

【问题讨论】：

标签： javascript jquery html each

【解决方案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>

【讨论】：

您应该使用$(this).find(".start") 导航到当前元素
这实际上是一个非常糟糕的实践，这个例子所做的。它很慢而且没有必要。像$($('.start')[index]).text()这样的东西看起来很可怕。想想它做了什么：每个循环获取所有 .start 元素，通过 [index] 从 jQuery 中只获取一个纯 dom 元素，然后使用 $() 再次使其成为 jQuery 对象，然后使用 .text() 获取内容。你为什么要这样做？ $(".start", $(this)).text() 完成。或者更好的是，之前将$(this) 设为变量，只将this 转换为jQuery 对象一次。就像在我的例子中......

【解决方案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)
});

应该可以的。

【讨论】：

$("#content").append(html);最好避免为找到的每个新 div.make 删除内容；）

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

（请注意，您尝试在每次迭代中更改 #content 的 innerHTML，因此您会覆盖 html。您可能希望在完成循环后只更新一次 #content。）

在 ES6 版本中：

const makes = document.querySelectorAll('.make');
let string = '';

Array.from(makes).forEach(div => {
    const text = div.querySelector('.name').textContent;
    const end = +div.querySelector('.end').textContent;
    let start = +div.querySelector('.start').textContent;

    while(start <= end) {
        string += `<div class='${start}'>${text} ${start++}</div>\n`;
    }
});
document.getElementById('content').innerHTML = string;

旧 Javascript 版本：

var makes = document.querySelectorAll('.make');
var string = '';

Array.from(makes).forEach(function(div) {
    var text = div.querySelector('.name').textContent;
    var end = +div.querySelector('.end').textContent;
    var start = +div.querySelector('.start').textContent;

    while(start <= end) {
        string += '<div class"' + start + '">' + text + ' ' + (start++) + '</div>\n';
    }
});
document.getElementById('content').innerHTML = string;

【讨论】：

【解决方案5】：

您的代码中存在一些问题：

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

您在每个 div 上循环，但不是基于当前 div 进行搜索。您应该使用$(this).find(".start") 来获取相关字段。
var start = $('.start').text(); 这将具有值 "1990" 而不是 1990。您应该使用parseInt 手动将其转换为整数。
$("#content").html(html) 这将在每次迭代中替换 html。要么使用.append()，要么在外部声明html variale，然后使用.html。请注意，循环修改 DOM 是一种不好的做法。我建议将变量移到外面并更新一次 dom。

Sample JSFiddle

【讨论】：