Question

您好我的jquery有点问题。首先，我有：

VW BORA 1.9TDI 1990 1995 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年   奥迪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多次出现不同内容，那么所有内容都会放在一起，但它应该是分开的。

像这样：

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>

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覆盖。您可能只想在{39}时更新#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;

Answer 4

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

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 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 varle outsite，然后使用.html。注意，在循环中修改DOM是一种不好的做法。我建议将变量移到外面并更新dom一次。

Sample JSFiddle

循环中的JS循环

5 个答案: