tag:forum.selfhtml.org,2005:/self $('img:has(float)')... geht nicht – SELFHTML-Forum 2010-02-17T19:00:55Z https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429170#m1429170 Timo Schaffert 2010-02-17T11:59:29Z 2010-02-17T11:59:29Z $('img:has(float)')... geht nicht <p>Hallo,</p> <p>Ich benutze Joomla und da klappt das ja wunderbar wenn man den Bilder die Eigenschaft "Links" oder "Rechts" mit gibt. Sie bekommen dann den style="float: left;" oder style="float: right;"</p> <p>Wie Selektiere ich mit Jquery nun Alle float:lefts und alle float:rights um diesen eine weitere CSS-Klasse hinzuzufügen?</p> <p>Um zu testen habe ich erstmal mit hide(); herum probiert, so sehe ich sofort welche bilder Jquery gematched hat.</p> <p>$('img:has(float)').hide();</p> <p>aber ich komm nicht auf die richtige Syntax....</p> <p>I need help!<br> Thanks!</p> <p>Timo</p> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429171#m1429171 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2010-02-17T12:31:38Z 2010-02-17T12:31:38Z $('img:has(float)')... geht nicht <p>@@Timo Schaffert:</p> <p>nuqneH</p> <blockquote> <p>Wie Selektiere ich mit Jquery nun Alle float:lefts und alle float:rights um diesen eine weitere CSS-Klasse hinzuzufügen?</p> </blockquote> <p>Was ist dein Problem, das du damit zu lösen gedenkst?</p> <p>Es gibt keine „CSS-Klassen“. Klassen sind ein Konzept, um gleichartige Elemente im Markup zu klassifizieren. Also ein HTML-Konzept.</p> <p>Eine mögliche Verwendung sind gemeinsame Stilangaben für diese Elemente per CSS-Klassenselektor.</p> <p>Qapla'</p> <div class="signature">-- <br> Volumen einer Pizza mit Radius z und Dicke a: pi z z a </div> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429172#m1429172 Timo 2010-02-17T12:37:49Z 2010-02-17T12:37:49Z $('img:has(float)')... geht nicht <p>Och Leute...</p> <p>Ich möchte nicht jedes Bild einzeln anklicken im CMS und händisch die CSS-KLASSE zuweisen. Das soll jQuery für mich machen wenn es erkennt das da ein float vorhanden ist. Je nach dem ob left oder right soll die Klasse .flpd_left oder flpd_right zugewiesen werden. In der CSS-KLASSE steht nichts anderes als ein padding-right: 5px; oder padding-left: 5px;</p> <p>Warum ist das hier immer so wichtig alles erklären zu müssen bevor man Hilfe bekommt?</p> <p>Timo</p> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429173#m1429173 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2010-02-17T13:35:12Z 2010-02-17T13:35:12Z $('img:has(float)')... geht nicht <p>@@Timo:</p> <p>nuqneH</p> <blockquote> <p>Ich möchte nicht jedes Bild einzeln anklicken im CMS und händisch die CSS-KLASSE zuweisen.</p> </blockquote> <p>Nochmal: Was ist dein Problem, das du damit zu lösen gedenkst?</p> <p>Und nochmal: Es gibt keine „CSS-Klassen“.</p> <blockquote> <p>Warum ist das hier immer so wichtig alles erklären zu müssen bevor man Hilfe bekommt?</p> </blockquote> <p>Damit du die passende Hilfe bekommst.</p> <p>Qapla'</p> <div class="signature">-- <br> Volumen einer Pizza mit Radius z und Dicke a: pi z z a </div> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429174#m1429174 Tiimo 2010-02-17T16:43:12Z 2010-02-17T16:43:12Z $('img:has(float)')... geht nicht <blockquote> <p>Nochmal: Was ist dein Problem, das du damit zu lösen gedenkst?</p> </blockquote> <p>:}</p> <p>Ich würde gerne wissen wie ich alle IMG-Tags die den<br> style="float: left"; oder<br> style="float: right";<br> tragen Manipulieren kann.</p> <p>Das genaue HTML sieht wie folgt aus:<br> <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token attr-name">ilo-full-src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></p> <p>Alle meine Versuche sind gescheitert.<br> Versuche waren zB:<br> $("img[style=float:'left';]")<br> $('img:has(float)')</p> <p>Timo</p> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429175#m1429175 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2010-02-17T16:59:24Z 2010-02-17T16:59:24Z $('img:has(float)')... geht nicht <p>@@Tiimo:</p> <p>nuqneH</p> <blockquote> <blockquote> <p>Nochmal: Was ist dein Problem, das du damit zu lösen gedenkst?<br> :}</p> </blockquote> <p>Ich würde gerne wissen wie ich alle IMG-Tags […]</p> </blockquote> <p>„Aber »Tags« klingt doch cooler? Nein.“ [<a href="http://meiert.com/de/publications/articles/20060924/" rel="nofollow noopener noreferrer">Meiert</a>]</p> <blockquote> <p>[…] die den<br> style="float: left"; oder<br> style="float: right";<br> tragen Manipulieren kann.</p> </blockquote> <p>Du begreifst es nicht, oder?</p> <p>Was ist dein EIGENTLICHES Problem? WARUM willst du die 'img'-Elemente per JavaScript manipulieren? WAS willst du erreichen?</p> <p>Qapla'</p> <div class="signature">-- <br> Volumen einer Pizza mit Radius z und Dicke a: pi z z a </div> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429176#m1429176 Timo 2010-02-17T17:21:01Z 2010-02-17T17:21:01Z $('img:has(float)')... geht nicht <p>Hallo nochmal,</p> <blockquote> <blockquote> <p>Ich würde gerne wissen wie ich alle IMG-Tags […]<br> „Aber »Tags« klingt doch cooler? Nein.“ [<a href="http://meiert.com/de/publications/articles/20060924/" rel="nofollow noopener noreferrer">Meiert</a>]</p> </blockquote> </blockquote> <p>Habe ich das gesagt? Ich habe nur "daher geredet" Ich meine natürlich Das IMG-Element, sorry...</p> <blockquote> <blockquote> <p>[…] die den<br> style="float: left"; oder<br> style="float: right";<br> tragen Manipulieren kann.</p> </blockquote> <p>Du begreifst es nicht, oder?</p> </blockquote> <p>Ich bitte dich Gunnar, könnten wir vielleicht mal auf mein Problem Technisch eingehen??</p> <blockquote> <p>Was ist dein EIGENTLICHES Problem? WARUM willst du die 'img'-Elemente per JavaScript manipulieren? WAS willst du erreichen?</p> </blockquote> <p>Über das CMS Joomla habe ich eine Reihe von Bildern Links ausgerichtet. Das hat zur folge, dass alle Bildern das CSS im HTML style="float: left;" gespeichert haben. Soweit so gut. Ich möchte das genau bei diesen Bildern, die ich links ausgerichtet habe außerdem ein padding (je nach dem right oder left) hinzugefügt wird. Das möchte ich aber nicht händisch machen, weil:</p> <p>1. Ich jeweils den blöden HTML-Editor von Joomla öffnen muss.<br> 2. Wenn zB ein Kunde am Bild was verstellt diese Information aus versehen entfernt werden könnte.</p> <p>Daher war es von mir eine über aus gute Idee, den IMG-Elementen bei denen float vorkommt die Stilangabe über Jquery-Manipulation nachträglich hinzuzufügen.</p> <p>Timo</p> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429177#m1429177 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2010-02-17T17:52:04Z 2010-02-17T17:52:04Z $('img:has(float)')... geht nicht <p>@@Timo:</p> <p>nuqneH</p> <blockquote> <p>Ich bitte dich Gunnar, könnten wir vielleicht mal auf mein Problem Technisch eingehen??</p> </blockquote> <p>Sobald eine Problembeschreibung (keine Symptombekämpfungsbeschreibung) deinerseits vorliegt, gern.</p> <blockquote> <blockquote> <p>Was ist dein EIGENTLICHES Problem? WARUM willst du die 'img'-Elemente per JavaScript manipulieren? WAS willst du erreichen?<br> Über das CMS Joomla habe ich eine Reihe von Bildern Links ausgerichtet. Das hat zur folge, dass alle Bildern das CSS im HTML style="float: left;" gespeichert haben. Soweit so gut.</p> </blockquote> </blockquote> <p>Nein, soweit so schlecht. Inline-Styles sind (fast) nie gut. Niemals.</p> <p>Hättest du nicht @style="float: left;" ins Markup geschmiert, sondern @class="picture-left" geschrieben, hättest du dein Problem gar nicht. Am besten, du korrigierst das.</p> <p>Sollte dies nachträglich nicht möglich sein, stelle dir die Frage: Warum nicht?</p> <p>Sollte dies immer noch nicht möglich sein, wäre das dennoch im Stylesheet zu korrigieren, nicht per JavaScript. Wozu gibt es denn Attributselektoren?</p> <p>Allerdings stößt man bei <code class="language-css">[style]</code> auf Schwierigkeiten: <a href="http://forum.de.selfhtml.org/archiv/2009/10/t191288/#m1275510" rel="nofollow noopener noreferrer">Zugriff auf CSS-direktformatierte Elemente</a>. Dennoch sollte dieser Weg gangbar sein und gegangen werden.</p> <p>Qapla'</p> <div class="signature">-- <br> Volumen einer Pizza mit Radius z und Dicke a: pi z z a </div> https://forum.selfhtml.org/self/2010/feb/17/img-has-float-geht-nicht/1429178#m1429178 Timo 2010-02-17T19:00:55Z 2010-02-17T19:00:55Z $('img:has(float)')... geht nicht <blockquote> <p>Sollte dies nachträglich nicht möglich sein, stelle dir die Frage: Warum nicht?</p> </blockquote> <p>Weil Joomla das eben so macht.</p> <blockquote> <p>Sollte dies immer noch nicht möglich sein, wäre das dennoch im Stylesheet zu korrigieren, nicht per JavaScript. Wozu gibt es denn Attributselektoren?</p> </blockquote> <p>Ja ist ja gut... Ist klar..</p> <p>Wie kann ich bei Joomla das ändern, dann schreibe ich das auch gerne um!</p> <p>Andernfalls habe ich die Lösung mittlerweile gefunden:</p> <p>// Erstmal alle Bilder selektieren<br> $('img').each(function(){<br>     // Hier prüfen wir dann, ob es ein float hat<br>     if($(this).css('float') == 'left' || $(this).css('float') == 'right'){<br>     // Hier ist dann der Code was passieren soll<br>     }<br> });</p> <p>... aber trotzdem Danke für die Diskussion ;-)</p> <p>[/CLOSE]</p>