JS Schleife innerhalb der Schleife

Question

Hallo Ich habe ein kleines Problem mit jquery. Zuerst habe ich:

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

Aber ich möchte erreichen:

VW BORA 1.9TDI 1990
VW BORA 1.9 TDI 1991
VW BORA 1.9 TDI 1992
VW BORA 1.9 TDI 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-Code:

<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-Code:

Wenn es Klasse .make mit einem Inhalt gibt, ist es in Ordnung, aber wenn Klasse .make viele Male mit unterschiedlichem Inhalt erscheint, wird der gesamte Inhalt zusammengefügt, aber es sollte getrennt sein.

So:

VW BORA 1.9TDIAudi A3 2.0TFSI 19.902.006
VW BORA 1.9TDIAudi A3 2.0TFSI 19.902.007
VW BORA 1.9TDIAudi A3 2.0TFSI 19.902.008
VW BORA 1.9TDIAudi A3 2.0TFSI 19902009

Answer 1

Das ist für Sie arbeiten würde: beachten Sie, dass $(".class") Rückkehr immer ein Array, In diesem Fall sollten Sie nacheinander auf den Wert index zugreifen.

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

Sie bestimmen nicht, wo jQuery nach den anderen Elementen suchen muss. Lassen Sie ihn im übergeordneten Kontext nach start, end und name suchen.

Und verwenden Sie html() anstelle von text(), um nur den Inhalt der Elemente zu erhalten.

$('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) 
}); 

Das sollte funktionieren.

Answer 3

(Beachten Sie, dass Sie #content ‚s innerHTML- innerhalb jeder Iteration zu ändern versuchen, so dass Sie die HTML außer Kraft gesetzt zu bekommen. Sie könnten die #content nur einmal aktualisiert werden sollen, wenn Sie mit der Schleife fertig sind.

)

In ES6 Version:

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; 

Old Javascript Version:

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

Erstens wollen Sie Elemente innerhalb der aktuell aktiven zu finden, aber Sie tun, um einen globalen Nachschlag. Um nur im aktuellen Bereich zu suchen etwas tun, wie folgt aus:

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

Sie wollen auch explizit den Wert über text() in einer Reihe wie folgt abgerufen konvertieren:

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

auch Definition von Variablen Sie iterieren über und nicht nur sie zu verwenden ist in der Regel eine gute Praxis.

jQuery bietet einige ziemlich nette Dienstprogramme mit DOM-Elementen zu arbeiten, so dass Sie Strings nicht verwenden müssen - wie folgt aus:

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

Answer 5

paar Probleme im Code:

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

• Sie auf jedem div sind Looping, aber nicht auf aktuelle div Benutzer basiert. Sie sollten lieber $(this).find(".start") verwenden, um relevante Felder zu erhalten.
• var start = $('.start').text(); Dies wird Wert "1990" und nicht 1990 haben. Sie sollten es manuell in Integer konvertieren, indem Sie parseInt verwenden.
• $("#content").html(html) Dies wird HTML in jeder Iteration ersetzen. Verwenden Sie entweder .append() oder deklarieren Sie html externe Variablen und verwenden Sie dann .html. Beachten Sie, es ist eine schlechte Übung, DOM in Schleife zu ändern. Ich würde vorschlagen, Variable nach draußen zu bewegen und Dom einmal zu aktualisieren.

Sample JSFiddle