tag:forum.selfhtml.org,2005:/self kniffelig: passenden Selektor finden – SELFHTML-Forum 2019-07-18T10:50:03Z https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753345?srt=yes#m1753345 Felix Riesterer https://felix-riesterer.de 2019-07-17T12:51:45Z 2019-07-17T12:51:45Z kniffelig: passenden Selektor finden <p>Liebe Mitlesende,</p> <p>ich suche das jeweils erste Element, das zu einer bestimmten Klasse gehört:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>9<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>10<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> </code></pre> <p>Ich habe folgendes versucht, was aber nicht greift:</p> <pre><code class="block language-css"><span class="token selector">tbody .a:first-of-type</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">tbody .b:first-of-type</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Folgerichtig findet der FF auch mit JavaScript nichts:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"tbody .a:first-of-type"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// leere NodeList</span> </code></pre> <p><a href="https://jsfiddle.net/Laberwurschd/hboc0sru/" rel="noopener noreferrer">Fiddle dazu</a></p> <p>Mit welchem Selektor erreiche ich mein Ziel?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753349?srt=yes#m1753349 J o 2019-07-17T13:08:54Z 2019-07-17T13:11:41Z kniffelig: passenden Selektor finden <p>Hey,</p> <p>die einzige Möglichkeit die ich dafür kenne ist <code>tbody .a {...} tbody .a ~ .a {...}</code>.</p> <p>Gruß<br> Jo</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753357?srt=yes#m1753357 1unitedpower 2019-07-17T13:44:43Z 2019-07-17T13:44:43Z kniffelig: passenden Selektor finden <blockquote> <p>ich suche das jeweils erste Element, das zu einer bestimmten Klasse gehört […]</p> <p>Folgerichtig findet der FF auch mit JavaScript nichts:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"tbody .a:first-of-type"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// leere NodeList</span> </code></pre> <p>Mit welchem Selektor erreiche ich mein Ziel?</p> </blockquote> <p>In JavaScript sollte <code>document.querySelector("tbody .a")</code> helfen.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753358?srt=yes#m1753358 Rolf B 2019-07-17T13:51:54Z 2019-07-17T14:02:22Z kniffelig: passenden Selektor finden <p>Hallo Felix,</p> <p>das W3C <a href="https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo" rel="nofollow noopener noreferrer">arbeitet noch dran</a>.</p> <p>Der Selektor wäre dann td:nth-child(1 of .a). Es scheint aber, als ob das noch kein Browser unterstützte.</p> <p>Update: <a href="https://caniuse.com/#feat=css-nth-child-of" rel="noopener noreferrer">Hier</a> ist die caniuse-Seite dazu.</p> <p>Bis dahin muss es wohl bei der Fummelei mit Geschwisterselektoren bleiben.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753350?srt=yes#m1753350 Tabellenkalk 2019-07-17T13:12:18Z 2019-07-17T13:12:18Z kniffelig: passenden Selektor finden <p>Hallo,</p> <blockquote> <p>die einzige Möglichkeit die ich dafür kenne ist <code>tbody .a ~ .a</code>.</p> </blockquote> <p>also:</p> <pre><code class="block language-css"><span class="token selector">tbody .a</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">tbody .a ~ .a</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753351?srt=yes#m1753351 J o 2019-07-17T13:17:19Z 2019-07-17T13:17:44Z kniffelig: passenden Selektor finden <p>Hey,</p> <p>Genau, mir ist erst hinterher aufgefallen das ich die wichtige Anweisung vergessen habe. Man überschreibt ja die vorherige Regel wieder für alle Siblings. Hier nochmal im <a href="https://jsfiddle.net/sfn763mh/1/" rel="noopener noreferrer">Fiddle</a>.</p> <p>Gruß<br> Jo</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753355?srt=yes#m1753355 Felix Riesterer https://felix-riesterer.de 2019-07-17T13:38:40Z 2019-07-17T13:38:40Z kniffelig: passenden Selektor finden <p>Lieber Tabellenkalk,</p> <p>vielen Dank! Mit Deiner Idee komme ich zu meiner gewünschten Darstellung.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753352?srt=yes#m1753352 Tabellenkalk 2019-07-17T13:26:41Z 2019-07-17T13:26:41Z kniffelig: passenden Selektor finden <p>Hallo,</p> <blockquote> <p>Hier nochmal im <a href="https://jsfiddle.net/sfn763mh/1/" rel="noopener noreferrer">Fiddle</a>.</p> </blockquote> <p>Die Idee mit dem <code>inherit</code> ist bestimmt sinnvoll. Warum nimmst du das nicht auch bei der Farbe?</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753354?srt=yes#m1753354 J o 2019-07-17T13:36:45Z 2019-07-17T13:36:45Z kniffelig: passenden Selektor finden <blockquote> <p>Hallo,</p> <blockquote> <p>Hier nochmal im <a href="https://jsfiddle.net/sfn763mh/1/" rel="noopener noreferrer">Fiddle</a>.</p> </blockquote> <p>Die Idee mit dem <code>inherit</code> ist bestimmt sinnvoll. Warum nimmst du das nicht auch bei der Farbe?</p> </blockquote> <p>Damit wollte ich natürlich andeuten das man die folgenden Siblings auch in einer anderen Farbe darstellen lassen kann.</p> <p>Nein ich habe das nur schnell noch hinzugefügt und dann nicht mehr dran gedacht.</p> <p>Gruß<br> Jo</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753510?srt=yes#m1753510 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-18T10:29:55Z 2019-07-18T10:29:55Z kniffelig: passenden Selektor finden <p>@@Tabellenkalk</p> <blockquote> <p>Die Idee mit dem <code>inherit</code> ist bestimmt sinnvoll.</p> </blockquote> <p>Die Idee mit dem <code>inherit</code> ist mit Vorsicht zu genießen. Das funktioniert nicht, wenn die Tabellenzellen eine Hintergrundfarbe haben. Ebensowenig <code>revert</code> und <code>unset</code>.</p> <p>In dem Fall muss man die Hintergrundfarbe von <code>.a ~ .a</code> auf die Hintergrundfarbe zurücksetzen. Custom properties können helfen, den Code DRY zu halten.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/bXGRwZ?editors=0100" rel="noopener noreferrer">Codepen</a></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> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753356?srt=yes#m1753356 Tabellenkalk 2019-07-17T13:42:10Z 2019-07-17T13:44:37Z kniffelig: passenden Selektor finden <p>Hallo,</p> <blockquote> <p>Mit Deiner Idee</p> </blockquote> <p>äh, meinten Sie: Mit J os Idee?</p> <p>Mir war sie nur unterbewusst und ich sah, dass J o den wesentlichen Trick zu erwähnen vergaß.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753359?srt=yes#m1753359 Felix Riesterer https://felix-riesterer.de 2019-07-17T14:00:57Z 2019-07-17T14:00:57Z kniffelig: passenden Selektor finden <p>Lieber 1unitedpower,</p> <blockquote> <p>In JavaScript sollte <code>document.querySelector("tbody .a")</code> helfen.</p> </blockquote> <p>damit finde ich das erste Element, das zu dieser Klasse gehört. In den anderen Zeilen der Tabelle fände ich die jeweils ersten Elemente nicht mehr, da Du ja nicht <code>querySelectorAll</code> einsetzt. Außerdem war der Weg über JavaScript nur ein Test, um zu sehen, dass der Browser an sich mit den Selektoren nichts findet - weder mit CSS noch mit JavaScript.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753360?srt=yes#m1753360 1unitedpower 2019-07-17T14:02:35Z 2019-07-17T14:02:35Z kniffelig: passenden Selektor finden <blockquote> <p>In JavaScript sollte <code>document.querySelector("tbody .a")</code> helfen.</p> </blockquote> <p>Noch nicht ganz. Ich habe den Fall vergessen, dass es mehrere tbodys geben kann. Jos Idee lässt sich aber auch auf JS übertragen:</p> <pre><code class="block language-js"><span class="token punctuation">[</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'tbody .a'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token operator">!</span>e<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.a ~ .a'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753361?srt=yes#m1753361 Felix Riesterer https://felix-riesterer.de 2019-07-17T14:04:07Z 2019-07-17T14:04:07Z kniffelig: passenden Selektor finden <p>Lieber Rolf,</p> <blockquote> <p>das W3C <a href="https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo" rel="nofollow noopener noreferrer">arbeitet noch dran</a>.</p> <p>Der Selektor wäre dann td:nth-child(1 of .a).</p> </blockquote> <p>interessant. Warum ist mein Selektor vom Gedankengang her falsch? Warum würde es den obigen dafür benötigen?</p> <blockquote> <p>Es scheint aber, als ob das noch kein Browser unterstützte.</p> </blockquote> <p>Habe vor Deinem Posting auch noch nichts davon gehört. Bin nicht so an der Entwicklerfront...</p> <blockquote> <p>Bis dahin muss es wohl bei der Fummelei mit Geschwisterselektoren bleiben.</p> </blockquote> <p>Mir wäre es lieber gewesen, wenn die Logik an sich bereits gegriffen hätte. Warum sollte <code>:nth-of-kind</code> nur für Element-Namen gelten? Warum nicht für alle Elemente, auf die das Kriterium an sich zutrifft?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753362?srt=yes#m1753362 Rolf B 2019-07-17T14:04:25Z 2019-07-17T14:05:18Z kniffelig: passenden Selektor finden <p>Hallo Felix,</p> <blockquote> <p>damit finde ich das erste Element, das zu dieser Klasse gehört.</p> </blockquote> <p><s>Ja. Das war doch dein Wunsch, oder nicht? Das erste Element, das Klasse a hat, soll fett angezeigt werden. Und das Problem in deinem Versuch ist, dass <code>.a:first-child</code> dann matcht, wenn das Element die Klasse a hat UND das erste Kind-Element ist.</s></p> <p>Ok, lese gerade 1ups Beitrag - bei mehreren TBODY funktioniert es nicht. Dann sieht das JS etwas komplizierter aus...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753432?srt=yes#m1753432 Rolf B 2019-07-17T19:13:43Z 2019-07-17T19:13:43Z kniffelig: passenden Selektor finden <p>Hallo 1unitedpower,</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'tbody .a'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token operator">!</span>e<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.a ~ .a'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Da fehlt was:</p> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token class-name">Nodelist</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter<span class="token punctuation">)</span> <span class="token class-name">Nodelist</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter<span class="token punctuation">;</span> </code></pre> <p>Weil querySelectorAll ja eine Nodelist liefert, kein Array.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753366?srt=yes#m1753366 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-17T14:09:31Z 2019-07-17T14:09:31Z kniffelig: passenden Selektor finden <p>@@Felix Riesterer</p> <blockquote> <p>Warum sollte <code>:nth-of-kind</code> nur für Element-Namen gelten?</p> </blockquote> <p>Es heißt <code>:nth-of-type</code> und zielt – wie der Name verspricht – auf Element<strong>typen</strong>.</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> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753367?srt=yes#m1753367 Rolf B 2019-07-17T14:09:35Z 2019-07-17T14:09:35Z kniffelig: passenden Selektor finden <p>Hallo Felix,</p> <blockquote> <p>Habe vor Deinem Posting auch noch nichts davon gehört. Bin nicht so an der Entwicklerfront...</p> </blockquote> <p>Ich auch nicht . Frisch ergoogelt.</p> <p>Warum dein Selektor nicht greift habe ich oben beschrieben.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753368?srt=yes#m1753368 1unitedpower 2019-07-17T14:10:05Z 2019-07-17T14:11:10Z kniffelig: passenden Selektor finden <blockquote> <p>Mir wäre es lieber gewesen, wenn die Logik an sich bereits gegriffen hätte. Warum sollte <code>:nth-of-kind</code> nur für Element-Namen gelten? Warum nicht für alle Elemente, auf die das Kriterium an sich zutrifft?</p> </blockquote> <p>Die Frage hast du dir <a href="https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753359#m1753359" rel="noopener noreferrer">hier</a> selber schon beanwortet. Du hättest dann das gleiche Problem, an dem mein erster JavaScript Vorschlag leidet.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753363?srt=yes#m1753363 Felix Riesterer https://felix-riesterer.de 2019-07-17T14:05:33Z 2019-07-17T14:05:33Z kniffelig: passenden Selektor finden <p>Lieber Rolf,</p> <blockquote> <p>Und das Problem in deinem Versuch ist, dass <code>.a:first-child</code> dann matcht, wenn das Element die Klasse a hat UND das erste Kind-Element ist.</p> </blockquote> <p>ich dachte, ich hätte <code>:first-of-type</code> notiert...</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753365?srt=yes#m1753365 Rolf B 2019-07-17T14:08:28Z 2019-07-17T14:08:28Z kniffelig: passenden Selektor finden <p>Hallo Felix,</p> <blockquote> <p>ich dachte, ich hätte :first-of-type notiert...</p> </blockquote> <p>Ja gut, hast Du, aber die Argumentation ist die gleiche. Das getroffene Element muss das erste seines Typs (hier also td) sein und die Klasse a tragen. Dann gibt's den Match.</p> <p>Was Du willst, ist der von mir im anderen Beitrag erwähnte of Operator für nth-of-type. Das ist eine Umbenennung vom W3C, vorher hieß das nth-match. Steht so im Spec Draft, sonst hätt ich das auch nicht gewusst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753414?srt=yes#m1753414 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-07-17T18:01:32Z 2019-07-17T18:01:32Z kniffelig: passenden Selektor finden <p>Aloha ;)</p> <blockquote> <p>Die Frage hast du dir <a href="https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753359#m1753359" rel="noopener noreferrer">hier</a> selber schon beanwortet. Du hättest dann das gleiche Problem, an dem mein erster JavaScript Vorschlag leidet.</p> </blockquote> <p>Hmmm, weiß ich nicht. Sicher?</p> <p>Die leere Node-List als Ergebnis ist damit eigentlich nicht zu erklären. Ein Element (das erste, aus dem ersten tbody) müsste so ja eigentlich gefunden werden?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753436?srt=yes#m1753436 1unitedpower 2019-07-17T19:23:04Z 2019-07-17T19:23:04Z kniffelig: passenden Selektor finden <blockquote> <p>Hmmm, weiß ich nicht. Sicher?</p> </blockquote> <p>Vielleicht habe ich Felix auch missverstanden.</p> <blockquote> <p>Die leere Node-List als Ergebnis ist damit eigentlich nicht zu erklären. Ein Element (das erste, aus dem ersten tbody) müsste so ja eigentlich gefunden werden?</p> </blockquote> <p>Wird es auch. Zitat Felix:</p> <blockquote> <p>damit finde ich das erste Element, das zu dieser Klasse gehört</p> </blockquote> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753435?srt=yes#m1753435 1unitedpower 2019-07-17T19:20:56Z 2019-07-17T19:20:56Z kniffelig: passenden Selektor finden <blockquote> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token class-name">Nodelist</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter<span class="token punctuation">)</span> <span class="token class-name">Nodelist</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter<span class="token punctuation">;</span> </code></pre> <p>Weil querySelectorAll ja eine Nodelist liefert, kein Array.</p> </blockquote> <p>Deshalb habe ich ja aus der NodeList zuvor ein Array gemacht. Mit der Kurzschreibweise <code>[...xs]</code>.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753497?srt=yes#m1753497 dedlfix 2019-07-18T09:13:39Z 2019-07-18T09:13:39Z kniffelig: passenden Selektor finden <p>Tach!</p> <blockquote> <pre><code class="block language-js"> <span class="token class-name">Nodelist</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>filter<span class="token punctuation">;</span> </code></pre> <p>Weil querySelectorAll ja eine Nodelist liefert, kein Array.</p> </blockquote> <p>Auf den ersten Blick sah mir diese Lösung recht clever aus. Einfach nur eine Referenz umbiegen, und schon hat die NodeList alle Methoden eines Arrays. Aber dann kamen mir Zweifel, ob das wirklich eine gute Idee ist. Eine definitive Antwort habe ich nicht und kann nur meine Bedenken äußern.</p> <p>Wenn das funktionieren soll, muss die NodeList in ihren Datenstrukturen einem Array entsprechen, so dass die Array-Funktionen exakt zugreifen können und nicht im Leeren oder auf etwas anderem landen. Oder aber die Array-Methoden verwenden ihrerseits (zufälligerweise?) nur genau die Zugriffswege, die auch die NodeList bietet. Und das müsste auf allen Implementationen gleichermaßen funktionieren.</p> <p>Ist das denn vorgesehen, dass sowas problemlos klappen kann? Oder sind meine Bedenken anderweitig unbegründet?</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753440?srt=yes#m1753440 Rolf B 2019-07-17T19:39:53Z 2019-07-17T19:40:15Z kniffelig: passenden Selektor finden <p>Hallo 1unitedpower,</p> <p>AUTSCH. Das habe ich nicht als JS Syntax erkannt.</p> <p><em>Nachlesen geh</em></p> <p>Aber - wäre das nicht das Erstellen einer Kopie?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753443?srt=yes#m1753443 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-07-17T19:52:23Z 2019-07-17T19:52:23Z kniffelig: passenden Selektor finden <p>Aloha ;)</p> <blockquote> <p>Wird es auch. Zitat Felix:</p> <blockquote> <p>damit finde ich das erste Element, das zu dieser Klasse gehört</p> </blockquote> </blockquote> <p>War das nicht auf deinen Vorschlag bezogen, im Kontrast zu seinem Selektor?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753442?srt=yes#m1753442 dedlfix 2019-07-17T19:49:12Z 2019-07-17T19:49:38Z kniffelig: passenden Selektor finden <p>Tach!</p> <blockquote> <p>AUTSCH. Das habe ich nicht als JS Syntax erkannt.</p> </blockquote> <p>Ja, das ist so ein neumodischer Kram, der im Standardbrowser IE6 nicht mehr läuft. Kein Wunder, dass man das nicht kennt ... </p> <blockquote> <p>Aber - wäre das nicht das Erstellen einer Kopie?</p> </blockquote> <p>Jein, nur eine Kopie der Referenzen.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753445?srt=yes#m1753445 1unitedpower 2019-07-17T20:00:36Z 2019-07-17T20:00:36Z kniffelig: passenden Selektor finden <blockquote> <p>Aber - wäre das nicht das Erstellen einer Kopie?</p> </blockquote> <p>Möglich, dass das eine <a href="https://we-are.bookmyshow.com/understanding-deep-and-shallow-copy-in-javascript-13438bad941c" rel="nofollow noopener noreferrer">shallow copy</a> erstellt wird. Andererseits könnte eine JavaScript-Engine den Kopiervorgang auch über <a href="https://medium.com/@roman01la/understanding-transducers-in-javascript-3500d3bd9624" rel="nofollow noopener noreferrer">Stream Fusion</a> wegoptimieren. Ob das relevant für die Performance oder den Speicherbedarf ist, müsste man durch Profiling herausfinden. Grundsätzlich optimiere ich aber zunächst nur für die Lesbarkeit. Performance-Optimierung auf Verdacht ist nicht sonderlich effektiv und effizient.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753493?srt=yes#m1753493 Rolf B 2019-07-18T08:51:09Z 2019-07-18T08:51:09Z kniffelig: passenden Selektor finden <p>Hallo dedlfix,</p> <blockquote> <p>Standardbrowser IE6</p> </blockquote> <p>Lach nur. Solange mein Brötchengeber den IE11 in der Breite einsetzt, ist das meine Baseline, auf der mein Code laufen muss. Das wird sich hoffentlich bald ändern...</p> <p>Aber solange der IE11 noch über 7% der Desktop-Browser repräsentiert (Quelle: sowohl Can I use wenn man die Quote bei Desktop ausrechnet, also auch Statista), ist er für mich ein relevanter Browser. JavaScript, das auf diesem Browser nicht läuft, ist zu vermeiden. Und da ich bisher keinen Bock auf einen Transpiler in meinem Toolstack hatte, bleibe ich eben bodenständig...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753447?srt=yes#m1753447 1unitedpower 2019-07-17T20:08:50Z 2019-07-17T20:27:57Z kniffelig: passenden Selektor finden <blockquote> <p>War das nicht auf deinen Vorschlag bezogen, im Kontrast zu seinem Selektor?</p> </blockquote> <p>Das hab ich in diesem Kontext geschrieben, ja. Das Problem mit meinem Code, auf das Felix dann aufmerksam gemacht hat, ist aber das gleiche Problem, das man sich einfahren würde, wenn man die Semantik von <code>nth-of-type</code> so ausweitet, wie Felix es in diesem Teilthread gewünscht hat.</p> <blockquote> <p>Mir wäre es lieber gewesen, wenn die Logik an sich bereits gegriffen hätte. Warum sollte :nth-of-kind nur für Element-Namen gelten? Warum nicht für alle Elemente, auf die das Kriterium an sich zutrifft?</p> </blockquote> <p>Ich verstehe Felix hier so, dass er mit dem <em>Kriterium</em> den Selektor meint, der vor der Pseudoklasse <code>:nth-of-type</code> steht. Ein Selektor <code>tbody .a:nth-of-type(1)</code> bzw. <code>tbody .a:first-of-type</code> würde dann ein einziges Element matchen. Wie schon gesagt, möchte ich nicht ausschließen, dass ich Felix in diesem Punkt missverstanden habe.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753453?srt=yes#m1753453 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-07-17T20:39:47Z 2019-07-17T20:39:47Z kniffelig: passenden Selektor finden <p>Aloha ;)</p> <p>Hm, vielleicht reden auch wir beide aneinander vorbei.</p> <blockquote> <p>Ich verstehe Felix hier so, dass er mit dem <em>Kriterium</em> den Selektor meint, der vor der Pseudoklasse <code>:nth-of-type</code> steht. Ein Selektor <code>tbody .a:nth-of-type(1)</code> bzw. <code>tbody .a:first-of-type</code> würde dann ein einziges Element matchen.</p> </blockquote> <p>Ja, ganz genau! Das würde dann ein einziges Element matchen. Eben das meine ich ja, und im OP hat sich das angehört, als würde eben nicht ein einziges Element matchen, sondern gar keines, und das kam mir seltsam vor.</p> <blockquote> <p>Wie schon gesagt, möchte ich nicht ausschließen, dass ich Felix in diesem Punkt missverstanden habe.</p> </blockquote> <p>Vielleicht hab auch ich ihn missverstanden. Aber selbst wenn <em>er</em> sich auf das bezog, was du meintest - bleibt für mich die im OP geschilderte Situation trotzdem nicht nachvollziehbar.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753457?srt=yes#m1753457 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-17T21:09:09Z 2019-07-17T21:09:09Z kniffelig: passenden Selektor finden <p>@@Camping_RIDER</p> <blockquote> <blockquote> <p>Ich verstehe Felix hier so, dass er mit dem <em>Kriterium</em> den Selektor meint, der vor der Pseudoklasse <code>:nth-of-type</code> steht. Ein Selektor <code>tbody .a:nth-of-type(1)</code> bzw. <code>tbody .a:first-of-type</code> würde dann ein einziges Element matchen.</p> </blockquote> <p>Ja, ganz genau! Das würde dann ein einziges Element matchen.</p> </blockquote> <p>Nei-en.</p> <blockquote> <p>Eben das meine ich ja, und im OP hat sich das angehört, als würde eben nicht ein einziges Element matchen, sondern gar keines, und das kam mir seltsam vor.</p> </blockquote> <p>Was ist daran seltsam? Es matcht keines, weil es kein Element der Klasse a gibt, welches das erste seines Typs ist.</p> <blockquote> <blockquote> <p>Wie schon gesagt, möchte ich nicht ausschließen, dass ich Felix in diesem Punkt missverstanden habe.</p> </blockquote> <p>Vielleicht hab auch ich ihn missverstanden.</p> </blockquote> <p>Felix habt ihr schon richtig verstanden. Den Selektor habt ihr nicht richtig verstanden.</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> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753458?srt=yes#m1753458 1unitedpower 2019-07-17T21:17:58Z 2019-07-17T21:17:58Z kniffelig: passenden Selektor finden <blockquote> <p>Felix habt ihr schon richtig verstanden. Den Selektor habt ihr nicht richtig verstanden.</p> </blockquote> <p>Wir redeten über ein fiktives Szenario <em>was wäre, wenn sich der Selektors anders verhielte</em>. Natürlich trifft das nicht auf die Realität zu, das ist die Natur der Sache.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753465?srt=yes#m1753465 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-07-17T21:44:35Z 2019-07-17T21:44:35Z kniffelig: passenden Selektor finden <p>Aloha ;)</p> <blockquote> <p>Felix habt ihr schon richtig verstanden. Den Selektor habt ihr nicht richtig verstanden.</p> </blockquote> <p>Wie wärs denn bitte, wenn ich schon offensichtlich was nicht verstanden habe, dass du mir erklärst, wo mein Denkfehler liegt? Immerhin hab ich genau danach gefragt.</p> <blockquote> <blockquote> <p>Eben das meine ich ja, und im OP hat sich das angehört, als würde eben nicht ein einziges Element matchen, sondern gar keines, und das kam mir seltsam vor.</p> </blockquote> <p>Was ist daran seltsam? Es matcht keines, weil es kein Element der Klasse a gibt, welches das erste seines Typs ist.</p> </blockquote> <p>Erklär mir das. Ich sehe da ein Element der Klasse a, das das erste seiner Art („Element der Klasse a“) innerhalb seines Elternelements ist.</p> <p>Inwiefern arbeitet der Selektor anders? Das war von Anfang an meine (und im Übrigen auch Felix') Frage.</p> <p>Grüße,</p> <p>RIDER</p> <p>P.S.: Ich empfinde ein</p> <blockquote> <p>Nei-en.</p> </blockquote> <p>als sehr viel arroganter/hochnäsiger als ein einfaches „Nein“. Nur um das mal rückzuspiegeln.</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753460?srt=yes#m1753460 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-17T21:18:58Z 2019-07-17T21:18:58Z kniffelig: passenden Selektor finden <p>@@1unitedpower</p> <blockquote> <blockquote> <p>Felix habt ihr schon richtig verstanden. Den Selektor habt ihr nicht richtig verstanden.</p> </blockquote> <p>Wir redeten über ein fiktives Szenario <em>was wäre, wenn sich der Selektors anders verhielte</em>. Natürlich trifft das nicht auf die Realität zu, das ist die Natur der Sache.</p> </blockquote> <p>Ah. Dann war ich es, der euch nicht verstanden hat.</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> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753469?srt=yes#m1753469 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-17T21:59:45Z 2019-07-17T21:59:45Z kniffelig: passenden Selektor finden <p>@@Camping_RIDER</p> <blockquote> <blockquote> <p>Was ist daran seltsam? Es matcht keines, weil es kein Element der Klasse a gibt, welches das erste seines Typs ist.</p> </blockquote> <p>Erklär mir das. Ich sehe da ein Element der Klasse a, das das erste seiner Art („Element der Klasse a“) innerhalb seines Elternelements ist.</p> </blockquote> <p>first-of-<strong>type</strong> heißt nicht „das erste seiner <strong>Art</strong>“, sondern „das erste seines <strong>Typs</strong>“. <a href="https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753366#m1753366" rel="noopener noreferrer">Das sagte ich</a> doch vor Stunden schon.</p> <p>Bei</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>9<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>10<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> </code></pre> <p>ist das erste <code>td</code>-Elements seines Typs das mit der 1 drin. Das gehört aber nicht der Klasse a an.</p> <p>Das gesuchte erste Element, das der Klasse a angehört, ist das mit der 3 drin. Das ist aber nicht das erste seines Typs, sondern das dritte.</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> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753504?srt=yes#m1753504 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-18T09:54:40Z 2019-07-18T09:54:40Z kniffelig: passenden Selektor finden <p>@@Camping_RIDER</p> <blockquote> <p>P.S.: Ich empfinde ein</p> <blockquote> <p>Nei-en.</p> </blockquote> <p>als sehr viel arroganter/hochnäsiger als ein einfaches „Nein“. Nur um das mal rückzuspiegeln.</p> </blockquote> <p>Deine Empfindung.</p> <p>Meinerseits war es das nicht. Ich war leicht genervt, weil du offenbar meinen zuvor schon gegebenen Hinweis, dass „Typ“ Elementtyp meint, ignoriert hattest.</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> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753470?srt=yes#m1753470 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-07-17T22:42:13Z 2019-07-17T22:42:13Z kniffelig: passenden Selektor finden <p>Aloha ;)</p> <blockquote> <p>first-of-<strong>type</strong> heißt nicht „das erste seiner <strong>Art</strong>“, sondern „das erste seines <strong>Typs</strong>“. <a href="https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753366#m1753366" rel="noopener noreferrer">Das sagte ich</a> doch vor Stunden schon.</p> </blockquote> <p>Ah, ich verstehe. Für mich war „Typ“ nicht gleichzeitig synonym mit „Elementtyp“. Denke das war auch das Problem, dem Felix da aufgesessen ist.</p> <p>Vielleicht müsste die Erkenntnis noch im Wiki aufgenommen werden.</p> <blockquote> <p>Bei</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>9<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>10<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> </code></pre> <p>ist das erste <code>td</code>-Elements seines Typs das mit der 1 drin. Das gehört aber nicht der Klasse a an.</p> <p>Das gesuchte erste Element, das der Klasse a angehört, ist das mit der 3 drin. Das ist aber nicht das erste seines Typs, sondern das dritte.</p> </blockquote> <p>Danke für die Erklärung!</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753499?srt=yes#m1753499 Rolf B 2019-07-18T09:26:29Z 2019-07-18T09:26:29Z kniffelig: passenden Selektor finden <p>Hallo dedlfix,</p> <p>ob ich die filter-Methode in den Prototypen der Nodelist kopiere oder ob ich</p> <pre><code class="block language-js"><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>nodelist<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> </code></pre> <p>schreibe, hat den gleichen Effekt. Dieses Vorgehen funktioniert bei vielen Array-Funktionen, weil die nämlich nichts weiter brauchen als den Indexierungs-Operator und die length Eigenschaft. Garantiert ist das nicht, aber zumindest für die forEach Methode schlägt sogar MDN vor, die forEach Methode des Array-Prototypen mit call aufzurufen. Und weil dieses „Unterschieben eines fremden <em>this</em>“ in JavaScript durch call/apply nichts ungewöhnliches ist, kann man davon ausgehen, dass die Array-Prototypfunktionen auf Leiharbeit dieser Art eingerichtet sind. Einen Beweis oder eine Garantie dafür habe ich natürlich nicht...</p> <p>Natürlich hat es Risiken, eine Nodelist ist live und ein Array ist statisch. Man findet auch Beispiele, die es so machen:</p> <pre><code class="block language-js">Array<span class="token punctuation">.</span>prototyle<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>nodelist<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> </code></pre> <p>was die Elemente der Nodelist ebenfalls zunächst in ein temporäres Array kopiert.</p> <p>Ich frage mich aber, was passieren kann. JavaScript ist singlethreaded, und da man während des filter-Callbacks typischerweise nicht am DOM herumfummeln wird, sollte sich die Nodelist während des Filter-Durchlaufs nicht ändern können.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753501?srt=yes#m1753501 dedlfix 2019-07-18T09:38:59Z 2019-07-18T09:38:59Z kniffelig: passenden Selektor finden <p>Tach!</p> <blockquote> <p>Dieses Vorgehen funktioniert bei vielen Array-Funktionen, weil die nämlich nichts weiter brauchen als den Indexierungs-Operator und die length Eigenschaft. Garantiert ist das nicht,</p> </blockquote> <p>Klingt zumindest plausibel, wenn der Indexzugriff alles ist, was die Array-Methoden brauchen.</p> <blockquote> <p>Natürlich hat es Risiken, eine Nodelist ist live und ein Array ist statisch.</p> </blockquote> <blockquote> <p>Ich frage mich aber, was passieren kann. JavaScript ist singlethreaded, und da man während des filter-Callbacks typischerweise nicht am DOM herumfummeln wird, sollte sich die Nodelist während des Filter-Durchlaufs nicht ändern können.</p> </blockquote> <p>Sehe ich auch so. Die Risiken sollten nur entstehen, wenn man die NodeList zwischenzeitlich unbeaufsichtigt lässt. Asynchrone Ereignisse grätschen ja nicht dazwischen, sondern stellen sich hinten an die Event-Loop an. (Absichtliche Modifikationen, wie Breakpoint aktivieren und währenddessen am DOM manipulieren halte ich für vernachlässigbar.)</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753513?srt=yes#m1753513 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-07-18T10:44:14Z 2019-07-18T10:44:14Z kniffelig: passenden Selektor finden <p>Aloha ;)</p> <blockquote> <p>Deine Empfindung.</p> <p>Meinerseits war es das nicht.</p> </blockquote> <p>Denk ich mir, deshalb sag ichs dir.</p> <blockquote> <p>Ich war leicht genervt, weil du offenbar meinen zuvor schon gegebenen Hinweis, dass „Typ“ Elementtyp meint, ignoriert hattest.</p> </blockquote> <p>Ne, nicht ignoriert. Zwar gelesen, aber irgendwie nicht richtig geistig durchdrungen.</p> <p>Nach deiner erneuten Erklärung hab ich mir dann auch erstmal an den Kopf gefasst, weil ja eigentlich alles schon dastand.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753515?srt=yes#m1753515 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-18T10:50:03Z 2019-07-18T10:50:03Z kniffelig: passenden Selektor finden <p>@@Gunnar Bittersmann</p> <blockquote> <p>In dem Fall muss man die Hintergrundfarbe von <code>.a ~ .a</code> auf die Hintergrundfarbe zurücksetzen. Custom properties können helfen, den Code DRY zu halten.</p> </blockquote> <p>Einfach die Selektoren in einer Regel aufzuzählen aber auch: <a href="https://codepen.io/gunnarbittersmann/pen/XvWeKQ?editors=0100" rel="noopener noreferrer">neuer Codepen</a>.</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>