循环内部的JS循环

Question

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

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

但我要做到：

大众BORA 1.9TDI 1990 VW BORA 1.9TDI 1991 大众BORA 1.9TDI 1992 大众博拉1.9TDI 1993 大众博拉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

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>

​

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

(请注意，您试图在每次迭代中更改#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;