jQuery array mit each(function) zusammenlegen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self jQuery array mit each(function) zusammenlegen Thu, 18 Apr 19 06:48:02 Z https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747006#m1747006 https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747006#m1747006 <p>Ich versuche mit jQuery die Selects und Inputs Werte in einem Array hinzufügen. So das der Array so aussieht:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> testarr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"Option1"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">,</span><span class="token string">"Input2"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"Option2"</span><span class="token punctuation">,</span><span class="token string">"Input1"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">,</span><span class="token string">"Text"</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span> </code></pre> <p>mit den leeren Werten.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>idTest1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select_css<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectTest[]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Option<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Option1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Option2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_css<span class="token punctuation">"</span></span> <span class="token attr-name">data-room</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_1[]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_css<span class="token punctuation">"</span></span> <span class="token attr-name">data-other</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_2[]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textareaTest[]<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Test<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea_css<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>idTest2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select_css<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectTest[]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Option<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Option1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Option2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_css<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_1[]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_css<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_2[]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textareaTest[]<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Test<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea_css<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Values in Array<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>arrlist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Hier komme ich nicht weiter, wie kann ich arraytest und arraytest_1 zusammenlegen so das es wie testarr aussieht?</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> arraytest <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'select'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> arraytest<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> arraytest_1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> arraytest_1<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <pre><code class="block language-javascript"><span class="token operator"><</span>script<span class="token operator">></span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#addButton"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> testarr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"Option1"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">,</span><span class="token string">"Input2"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"Option2"</span><span class="token punctuation">,</span><span class="token string">"Input1"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">,</span><span class="token string">"Text"</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>testarr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> text <span class="token operator">=</span> <span class="token string">'<div>'</span><span class="token operator">+</span>testarr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'<br>'</span><span class="token operator">+</span>testarr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'</div><div>'</span><span class="token operator">+</span>testarr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'</div>'</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#arrlist"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>Danke für die Hilfe</p> <p>Maxet</p> jQuery array mit each(function) zusammenlegen Thu, 18 Apr 19 08:37:08 Z https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747025#m1747025 https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747025#m1747025 <p>Hallo Maxet,</p> <p>ich versuche mal, mein Verständnis der Dinge wiederzugeben und darauf einen Lösungsvorschlag aufzubauen.</p> <p>Aber vorweg: Wenn es Dir darum gehen sollte, die Daten aus den Eingabefeldern einzusammeln um sie per $.post an den Server zu senden, dann lege besser ein form um alles und benutze jQuery.serialize. Oder nimm einfach das <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData" rel="nofollow noopener noreferrer">FormData-Objekt</a>, das die heutigen Browser alle kennen - sogar schon der Internet Explorer 10.</p> <p>Zu meinem Vorschlag der auf deiner Lösungsstruktur basiert:</p> <p>Du hast eine HTML Seite. Die besteht aus 2 gleichartigen Blöcken, jeder davon besteht aus einem select, zwei text-Inputs und einer textarea.</p> <p><em>Kleiner Copy/Paste Fehler am Rande: die zweite textarea darf nicht die gleiche ID wie die erste haben. Eine Suche nach der zweiten textarea mittels ID wird nicht funktionieren</em></p> <p><em>Kleines HTML Missverständnis: input ist ein inhaltsloses Element. Es gibt nur <input>, kein </input>. Darum ist etwas wie <input type="text" /> in normalem HTML falsch, das Tag endet mit >, nicht mit />. Es sei denn, du machst XHMTL, aber das wäre sehr ungewöhnlich. Bei <textarea> ist es anders, dieses Element hat Inhalt, und </textarea> muss immer explizit geschrieben werden.</em></p> <p><em><strong>Großer HTML Fehler mittendrin: Eingabe-Elemente benötigen eine Beschriftung. Für eine Spielseite, die den Datentransfer testen soll, ist es egal. Aber denk an die <label> Elemente wenn Du damit live gehst</strong></em></p> <p>Wenn ich dein Musterarray richtig deute, dann möchtest Du ein Array mit zwei Einträgen haben. Der erste Eintrag enthält ein Array mit den Inhalten aus dem ersten HTML Block, in der Reihenfolge Select-Wert, input-Wert 1, input-Wert 2, textarea-Wert. Der zweite Eintrag enthält ein gleichartiges Array für den zweiten HTML Block.</p> <p>Was ich damit nicht übereinanderbringe, sind deine beiden jQuery each Aufrufe. Der erste sammelt alle select-Werte ein, der zweite alle input Werte, und die textarea-Werte werden gar nicht gelesen.</p> <p>Um die gewünschte Arraystruktur erhalten zu können, empfehle ich Dir zunächst einmal eine gleichartige Gliederung des HTML. Derzeit hast Du 4 div-Gruppen, wovon jeweils 2 zusammengehören. Ich würde <fieldset> vorschlagen, das erzeugt einen Rahmen, und mit <legend> auch eine Überschrift im Rahmen, so wie eine Groupbox in Desktop-UIs. Das Beispiel zeigt auch die beiden Möglichkeiten, wie Du Labels setzen kannst: Als umschließendes Element, oder separat, aber mit for und id verknüpft.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Eingabegruppe 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Optionen: <select ... /select><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input1a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eingabe 1:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input1a<span class="token punctuation">"</span></span> <span class="token attr-name">...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">...</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Eingabegruppe 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> <p>Nachdem Du diese Struktur eingebaut hast, solltest Du zweistufig vorgehen. Die äußere Stufe verarbeitet die fieldsets. Wenn Du noch andere fieldsets hast, musst Du entweder Klassen vergeben oder einen weiteren Container drum herum legen und den jQuery Selector entsprechend anpassen:</p> <pre><code class="block language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"fieldset"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> fvalues <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input,textarea,select"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Dieser "Einzeiler" hat es in sich. Die <code>map</code> Funktion für jQuery-Sets wendet die übergebene Funktion auf jedes Element des Sets an, das vom $(...) Aufruf gebildet wurde. D.h. das äußere Map wird einmal pro Fieldset aufgerufen. Die Callback-Funktion von <code>map</code> bekommt zwar Parameter - das kannst Du Dir im Zweifel in der <a href="https://api.jquery.com/map/#map-callback" rel="nofollow noopener noreferrer">jQuery-Doku</a> durchlesen - aber einfacher ist es, <code>this</code> zu verwenden, weil jQuery die Callback-Funktion so aufruft, dass <code>this</code> ebenfalls auf das gerade verarbeitete Element zeigt.</p> <p>Wenn Dir <code>map</code> völlig rätselhaft ist - es macht eigentlich überhaupt nichts anderes als dein <code>each</code>, das seine Ergebnisse per <code>push</code> in ein Array schreibt. <code>map</code> nimmt Dir das Anlegen des temporären Arrays und den <code>push</code> ab. Unterschied ist nur, dass das <code>map</code> von jQuery kein Array erzeugt, sondern ein jQuery-Set. Dieses Set kann man mit der <code>get</code> Funktion in ein Array umwandeln.</p> <p>Der innere jQuery Aufruf sammelt alle Inhalte des Fieldset ein. Ich weiß nicht ob Du diese Form des jQuery-Aufrufs kennst: Wenn die Variable elem auf ein Objekt des DOM verweist, dann sammelt <code>$("input", elem)</code> alle input-Elemente ein, die innerhalb dieses Objekts zu finden sind.</p> <p>Ein Selektor <code>"input,textarea,select"</code> findet alle select-, input- und textarea-Elemente, und zwar in der Reihenfolge, wie sie im DOM stehen, nicht so sortiert wie die Teile im Selektor angegeben sind. Auf diese Sammlung wird wieder <code>map</code> angewendet, mit einer Callback-Funktion, die lediglich die ausgewählten Werte herausholt. Ergebnis ist ein jQuery-Set, das die in den Eingabeelementen ausgewählten oder eingegebenen Werte enthält.</p> <p>Auf dieses neue Set wird die <code>get</code> Funktion angewendet, um ein normales Array daraus zu machen. Und dieses Array wird an das äußere <code>map</code> zurückgegeben. Weil der äußere <code>map</code> die fieldsets verarbeitet, produziert dies nun ein jQuery-Set aus Arrays mit Feldinhalten. Ein letztes <code>get()</code> macht aus diesem Set wieder ein Array.</p> <p>Wenn Dir diese Schachtelung zu wüst ist, kann man das auch trennen. Die Callback-Funktion des äußeren <code>map</code> kann auch eine benannte, allein stehende Funktion sein:</p> <pre><code class="block language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"fieldset"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>sammleFieldsetWerte<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">sammleFieldsetWerte</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input,textarea,select"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> jQuery array mit each(function) zusammenlegen Thu, 18 Apr 19 09:00:22 Z https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747029#m1747029 https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747029#m1747029 <p>Vielen vielen Dank für deine Antwort.</p> <p>Was ich erreichen möchte ist, das der Array so aussieht:</p> <p><code>var testarr=[["Option1","","Input2",""],["Option2","Input1","","Text"]];</code></p> <p>und ich ihn dann mit dieser For-Schleife ausgeben kann:</p> <pre><code class="block language-javascript"><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>testarr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> text <span class="token operator">=</span> <span class="token string">'<div>'</span><span class="token operator">+</span>testarr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'<br>'</span><span class="token operator">+</span>testarr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'</div><div>'</span><span class="token operator">+</span>testarr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'</div>'</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#arrlist"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ich habe ein Form und dieser Array dient nur dazu da, das ich die Werte nochmals anzeigen kann, bevor der eigentliche Submit von dem Formular stattfindet.</p> <p>Und ich habe mehrere solche Blöcke, die sind einfach versteckt. Mit klick auf dem Button "hinzufügen" wird wieder ein neuer Block sichtbar.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>idTest1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select_css<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectTest[]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Option<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Option1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Option2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_css<span class="token punctuation">"</span></span> <span class="token attr-name">data-room</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_1[]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_css<span class="token punctuation">"</span></span> <span class="token attr-name">data-other</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input_2[]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> jQuery array mit each(function) zusammenlegen Sun, 21 Apr 19 00:16:40 Z https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747165#m1747165 https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747165#m1747165 <p>@@Rolf B</p> <blockquote> <p><em>Kleines HTML Missverständnis: input ist ein inhaltsloses Element. Es gibt nur <input>, kein </input>. Darum ist etwas wie <input type="text" /> in normalem HTML falsch, das Tag endet mit >, nicht mit /></em>.</p> </blockquote> <p>Das Missverständnis liegt auf deiner Seite. Selbstverständlich ist <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">/></span></span></code> korrekt. Sonst könnte man ja kein polyglottes HTML schreiben (das als HTML und als XHTML verarbeitet werden kann).</p> <p>Nachzulesen in der <a href="https://w3c.github.io/html/syntax.html#start-tags" rel="nofollow noopener noreferrer">Spec</a>: <em lang="en">“Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/).”</em></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> jQuery array mit each(function) zusammenlegen Thu, 18 Apr 19 11:12:32 Z https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747044#m1747044 https://forum.selfhtml.org/self/2019/apr/18/jquery-array-mit-each-function-zusammenlegen/1747044#m1747044 <p>Hallo Maxet,</p> <p>gehört die textarea ins Array oder nicht? Dein Beispiel-Array scheint sie zu enthalten, dein Testoutput verwendet den 4. Eintrag aber nicht.</p> <p>Wie gesagt: Es ist einfacher, wenn die Teile, die einen Array-Eintrag bilden, auch im HTML zu einer Einheit zusammengefasst sind. Das, was ich oben aufgeschrieben habe, sollte dann den von Dir gewünschten Zweck erfüllen.</p> <p>Ein Hinweis zur Blockverwaltung: wenn Du Blöcke einblendest - warum? Wenn Du beispielsweise 10 Blöcke "auf Vorrat" im HTML hast, dann hast Du beim elften angeforderten Block verloren. In solchen Fällen setzt man besser nur einen Block ins HTML und fügt weitere Blöcke - falls nötig mit entsprechend angepassten Namen und IDs - per JavaScript hinzu. Das dynamische Hinzufügen wird durch fieldsets ebenfalls einfacher. Wenn die Struktur so aussieht:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fieldcontainer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> </code></pre> <p>dann musst Du dem fieldContainer nur ein neues Fieldset hinzufügen (<code>document.createElement("fieldset")</code>) und das innerHTML des neuen fieldset aus einer Vorlage füllen. Das kann ein template-Element sein (nicht im Internet Explorer), oder einfach ein Vorlagenstring im JavaScript. Wenn Du Namen oder IDs anpassen musst, dann baust Du in den Vorlagenstring etwas ein wie $$$ oder $#$ - egal was, Hauptsache es wird nicht als normaler Text verwendet - und mit der replace-Funktion ersetzt Du das durch die laufende Nummer der Gruppe.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div>