Div erstellen bei neuer Zeile in Textarea

[macpat]

Habe bereits die Forumsuche benutzt aber leider nichts hilfreiches gefunden.

Habe auf meiner Seite ein Textfeld id="vtext". Ich hole mir mit folgendem js den Inhalt und erstelle aus dem eingetragenen Text Container in #target div mit dem jeweiligen Inhalt, das funktioniert schon prima.

Ich möchte aber, dass die bereits erstellen divs nicht mehr gelöscht und neu erstellt werden sondern nur die Zeilen die im textarea neu hinzu gekommen ist, dies aber sobald sich im textarea was verändert.

Das sich das alles neu erstellt liegt an der for schleife, aber wie könnte ich das lösen? Möchte das eleganter lösen.
Ich bin für euere Antworten sehr dankbar!

$('#vtext').keyup(function() {
        var keyed = $(this).val().replace(/\n/g, '<br/>');
        $("#target div").text(keyed);
        
        entered = $('#vtext').val();
         lines = entered.split(/\n/);
         var count = lines.length;
         opttext = ""; 
         opttext2 = "";
      
         var xcount = count-1;
        
            for (var i in lines) {
                 opttext += '<section style="float:left; width:100%;"><div id="row'+i+'" style="float:left; width:100%;"><p>'+ lines[i] + '</p></div></section>';
                 opttext2 += '<div id="opt'+i+'" style="float:left; width:100%; margin-top:0.5em; margin-bottom:0.5em;"></div>';
            }
            $('#target').html(opttext);
            $('#irows').html(opttext2);
            for(var i in lines) {
                 $('#opt'+i).load('typo3conf/ext/dxlshopcart/Resources/Public/JavaScript/settings.php', { tid: i });
            }
            $("#target").css("width","100%");
         
});

 

[kkapsner]

Kannst du mal erklären, was du genau erreichen willst. Ich hab' nämlich das Gefühl, dass das nicht der ideal Weg ist.

Aber prinzipiell kannst du irgendwo (nein, nicht in einer globalen Variable) speichern, wieviele Zeilen du beim letzten mal hattest und dann vergleichen. Aber was soll passieren, wenn eine Zeile gelöscht wird? Oder eine schon bestehende geändert? Und soll der Text in den <section>s aktualisiert werden?

PS: ein for...in auf einem Array ist keine gute Idee. Mach' eine ganz normale Schleife oder benutze ARRAY.forEach().

 

[macpat]

Danke für deine Antwort.

Es soll eine Art Generator werden, siehe Link.
Wie könnte ich das eleganter lösen? Generator

Und hier sollte nicht immer alles neu erstellt werden, sondern eben stehen bleiben.

 

[kkapsner]

Bei dem Generator, den du gezeigt hast, sind die Zeilen ja alle irgendwie voneinander abhängig. Ist das bei dir auch der Fall?

Ich würde da ja kein <textarea> machen, sondern für jede Zeile ein <input>, die man nach belieben hinzufügen und entfernen kann.

PS: der Generator ist wirklich nicht gut geschrieben, da mein FF 25% CPU-Last erzeugt (also ein kompletter Kern), wenn der Tab offen ist.

 

[miniA4kuser]

PS: der Generator ist wirklich nicht gut geschrieben, da mein FF 25% CPU-Last erzeugt (also ein kompletter Kern), wenn der Tab offen ist.

Na da bin ich ja beruhigt, dachte schon mein FF hätte ein Problem

 

[macpat]

Danke für eure Antwort. Das mit der Performance löse ich noch.

Gibts keine Möglichkeit das über das textarea zu lösen? Jetzt löse ich es wie oben genannt mit der for schleife in der keyup-Function.
Wie könnte meine Lösung mit ARRAY.forEach() oder der ganz normalen Schleife aussehen?

 

[kkapsner]

Das mit der Performance löse ich noch.

Das würde ich mal an die erste Stelle packen. Damit vergraulst du Kunden.

Gibts keine Möglichkeit das über das textarea zu lösen?

Gibt es schon - ist nur viel aufwändiger.
Wie gesagt, du müsstest dir die Zeilen aus dem vorherigen Durchgang speichern und dann immer überprüfen, ob eine dazugekommen ist oder ob sich welche verändert haben.

Wie könnte meine Lösung mit ARRAY.forEach() oder der ganz normalen Schleife aussehen?

            for (var i = 0; i < lines.length ; i += 1) {
                 opttext += '<section style="float:left; width:100%;"><div id="row'+i+'" style="float:left; width:100%;"><p>'+ lines[i] + '</p></div></section>';
                 opttext2 += '<div id="opt'+i+'" style="float:left; width:100%; margin-top:0.5em; margin-bottom:0.5em;"></div>';
            }

oder

lines.forEach(function(line, i){
    opttext += '<section style="float:left; width:100%;"><div id="row'+i+'" style="float:left; width:100%;"><p>'+ line + '</p></div></section>';
    opttext2 += '<div id="opt'+i+'" style="float:left; width:100%; margin-top:0.5em; margin-bottom:0.5em;"></div>';
});

 

[macpat]

Danke für deine Antwort.

Ich hab jetzt die #row+i fix erstellt.
Die for sollte mir jetzt nur den Text lines in die rows einfügen und ändern wenn der Text sich ändert. Dann sollte die Formatierung gleich bleiben, weil ich die ja auf die (harcodeten) #row+i anwendet.
Kannst du mir da noch mal helfen?

 

[kkapsner]

Kannst du mir da noch mal helfen?

Mir ist jetzt nicht ganz klar, wobei ich dir genau helfen soll.