tag:forum.selfhtml.org,2005:/selfkniffelig: passenden Selektor finden – SELFHTML-Forum2019-07-18T10:50:03Zhttps://forum.selfhtml.org/self/2019/jul/17/kniffelig-passenden-selektor-finden/1753345?srt=yes#m1753345Felix Riestererhttps://felix-riesterer.de2019-07-17T12:51:45Z2019-07-17T12:51:45Zkniffelig: 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#m1753349J o2019-07-17T13:08:54Z2019-07-17T13:11:41Zkniffelig: 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#m17533571unitedpower2019-07-17T13:44:43Z2019-07-17T13:44:43Zkniffelig: 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#m1753358Rolf B2019-07-17T13:51:54Z2019-07-17T14:02:22Zkniffelig: 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#m1753350Tabellenkalk2019-07-17T13:12:18Z2019-07-17T13:12:18Zkniffelig: 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#m1753351J o2019-07-17T13:17:19Z2019-07-17T13:17:44Zkniffelig: 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#m1753355Felix Riestererhttps://felix-riesterer.de2019-07-17T13:38:40Z2019-07-17T13:38:40Zkniffelig: 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#m1753352Tabellenkalk2019-07-17T13:26:41Z2019-07-17T13:26:41Zkniffelig: 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#m1753354J o2019-07-17T13:36:45Z2019-07-17T13:36:45Zkniffelig: 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#m1753510Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-18T10:29:55Z2019-07-18T10:29:55Zkniffelig: 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#m1753356Tabellenkalk2019-07-17T13:42:10Z2019-07-17T13:44:37Zkniffelig: 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#m1753359Felix Riestererhttps://felix-riesterer.de2019-07-17T14:00:57Z2019-07-17T14:00:57Zkniffelig: 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#m17533601unitedpower2019-07-17T14:02:35Z2019-07-17T14:02:35Zkniffelig: 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#m1753361Felix Riestererhttps://felix-riesterer.de2019-07-17T14:04:07Z2019-07-17T14:04:07Zkniffelig: 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#m1753362Rolf B2019-07-17T14:04:25Z2019-07-17T14:05:18Zkniffelig: 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#m1753432Rolf B2019-07-17T19:13:43Z2019-07-17T19:13:43Zkniffelig: 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#m1753366Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-17T14:09:31Z2019-07-17T14:09:31Zkniffelig: 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#m1753367Rolf B2019-07-17T14:09:35Z2019-07-17T14:09:35Zkniffelig: 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#m17533681unitedpower2019-07-17T14:10:05Z2019-07-17T14:11:10Zkniffelig: 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#m1753363Felix Riestererhttps://felix-riesterer.de2019-07-17T14:05:33Z2019-07-17T14:05:33Zkniffelig: 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#m1753365Rolf B2019-07-17T14:08:28Z2019-07-17T14:08:28Zkniffelig: 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#m1753414Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-07-17T18:01:32Z2019-07-17T18:01:32Zkniffelig: 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#m17534361unitedpower2019-07-17T19:23:04Z2019-07-17T19:23:04Zkniffelig: 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#m17534351unitedpower2019-07-17T19:20:56Z2019-07-17T19:20:56Zkniffelig: 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#m1753497dedlfix2019-07-18T09:13:39Z2019-07-18T09:13:39Zkniffelig: 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#m1753440Rolf B2019-07-17T19:39:53Z2019-07-17T19:40:15Zkniffelig: 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#m1753443Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-07-17T19:52:23Z2019-07-17T19:52:23Zkniffelig: 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#m1753442dedlfix2019-07-17T19:49:12Z2019-07-17T19:49:38Zkniffelig: 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#m17534451unitedpower2019-07-17T20:00:36Z2019-07-17T20:00:36Zkniffelig: 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#m1753493Rolf B2019-07-18T08:51:09Z2019-07-18T08:51:09Zkniffelig: 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#m17534471unitedpower2019-07-17T20:08:50Z2019-07-17T20:27:57Zkniffelig: 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#m1753453Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-07-17T20:39:47Z2019-07-17T20:39:47Zkniffelig: 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#m1753457Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-17T21:09:09Z2019-07-17T21:09:09Zkniffelig: 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#m17534581unitedpower2019-07-17T21:17:58Z2019-07-17T21:17:58Zkniffelig: 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#m1753465Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-07-17T21:44:35Z2019-07-17T21:44:35Zkniffelig: 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#m1753460Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-17T21:18:58Z2019-07-17T21:18:58Zkniffelig: 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#m1753469Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-17T21:59:45Z2019-07-17T21:59:45Zkniffelig: 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#m1753504Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-18T09:54:40Z2019-07-18T09:54:40Zkniffelig: 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#m1753470Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-07-17T22:42:13Z2019-07-17T22:42:13Zkniffelig: 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#m1753499Rolf B2019-07-18T09:26:29Z2019-07-18T09:26:29Zkniffelig: 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#m1753501dedlfix2019-07-18T09:38:59Z2019-07-18T09:38:59Zkniffelig: 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#m1753513Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-07-18T10:44:14Z2019-07-18T10:44:14Zkniffelig: 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#m1753515Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-07-18T10:50:03Z2019-07-18T10:50:03Zkniffelig: 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>