tag:forum.selfhtml.org,2005:/self jQuery - Objekte aneinander hängen – SELFHTML-Forum 2011-02-03T18:07:09Z https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492304#m1492304 johny7 forum@johny7.de http://www.johny7.de 2011-02-02T09:57:22Z 2011-02-02T09:57:22Z jQuery - Objekte aneinander hängen <p>Moin allerseits,</p> <p>in jQuery gibt es Methoden, die ein Objekt-Set zurückgeben, so z.B. wenn ich <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span></code> aufrufe und in meinem HTML mehrere divs vorhanden sind.</p> <p>Jetzt bin ich dabei, eine eigene Funktion zu schreiben, die auch ggf. so ein Objekt-Set zurück gibt.</p> <p>z.B.</p> <pre><code class="block language-javascript"> jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">myfilter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> retObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'hallo'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> retObj <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Hier wird jetzt retObj einfach überschrieben. </span> <span class="token comment">// Wie mache ich es aber, dass es angehängt wird, damit am Ende ein Objekt-Set herauskommt? </span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> retObj<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ich brauche das allerdings nicht, um eine Filter-Funktion zu programmieren, sondern um ab zu fragen, ob sich zwei Flächen berühren/kollidieren. Vielleicht gibt es dazu schon eine Funktion, dann wäre ich euch dankbar für einen Hinweis.</p> <p>Grüße, JN</p> <div class="signature">-- <br> ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)<br> http://www.johny7.de </div> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492310#m1492310 Struppi struebig@gmx.net http://javascript.jstruebig.de 2011-02-02T11:02:34Z 2011-02-02T11:02:34Z jQuery - Objekte aneinander hängen <blockquote> <p>in jQuery gibt es Methoden, die ein Objekt-Set zurückgeben, so z.B. wenn ich <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span></code> aufrufe und in meinem HTML mehrere divs vorhanden sind.</p> </blockquote> <p>Vorweg ich bin kein jquery experte, aber das ist soweit ich weiß nicht richtig. Die Methoden geben das jquery Objekt zurück, aber $() erstellt eine Objektliste, die dann im weiteren verlauf genutzt wird.</p> <p>Daher müßte eigentlich das ausreichen:</p> <pre><code class="block language-javascript">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">myfilter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'hallo'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Struppi.</p> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492305#m1492305 Joachim wendenburg@t-online.de http://www.schwarz-weiss.net 2011-02-02T14:18:53Z 2011-02-02T14:18:53Z jQuery - Objekte aneinander hängen <p>hi,</p> <blockquote> <p>jQuery.fn.myfilter = function(str)<br>    {<br>    var retObj = {};<br>    $(this).find(str).each(function()</p> </blockquote> <p>Es gibt bei jquery einen Artikel zum <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow noopener noreferrer">Plugin-Authoring</a>, den solltest Du dringend lesen. Wichtig ist immer die dieser Aufbau:</p> <p>return this.each(function() {<br>             ...<br>         });</p> <p>damit die Verkettung der Methoden erhalten bleibt. Dein Versuchaufbau, der also alle Elemente der Klasse "hallo" unterhalb bestimmter Eltern rausfiltert sähe in Kurzform etwa so aus:</p> <p><!DOCTYPE html><br> <html><br> <head><br> <script type="text/javascript" src="HIER DEIN JQUERY"></script><br> <script type="text/javascript"><br> (function($){<br>     $.fn.myfilter = function(str) {<br>         return this.each(function() {<br>             $(this).find(str + ".hallo").each(function() {<br>                 $.myfilter.store.push( $(this).html() );<br>             });<br>         });<br>     };<br>     $.myfilter =  {<br>         store:[]<br>     };<br> })( jQuery );</p> <p>$(document).ready(function(){<br>     $("div").myfilter("p");<br>     alert($.myfilter.store.toSource())<br> });<br> </script><br> </head><br> <body><br>     <div><br>         <p>2</p><br>         <p class="hallo">3</p><br>         <p>4</p><br>         <p class="hallo">5</p><br>     </div><br>     <div><br>         <p>x</p><br>         <p class="hallo">y</p><br>         <p class="hallo">z</p><br>     </div><br> </body><br> </html></p> <p>Gruesse, Joachim</p> <div class="signature">-- <br> Am Ende wird alles gut. </div> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492306#m1492306 molily zapperlott@gmail.com 2011-02-02T14:38:26Z 2011-02-02T14:38:26Z jQuery - Objekte aneinander hängen <blockquote> <p>$("div").myfilter("p");<br>     alert($.myfilter.store.toSource())</p> </blockquote> <p>Man würde erwarten, dass myfilter() die Resultate als jQuery-Wrapper zurückgibt, nicht dass man sie noch aus einem dritten Objekt holen muss.</p> <p>Dafür reicht doch folgendes aus:</p> <pre><code class="block language-javascript">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">myfilter</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str <span class="token operator">+</span> <span class="token string">' .hallo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>Wenn ich jetzt myfilter aufrufe, bekomme ich ein jQuery-Objekt zurück und die »Chainability« bleibt erhalten.</p> <p>Verstehe ich gerade etwas falsch oder wieso der Umweg?</p> <p>Mathias</p> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492309#m1492309 molily 2011-02-02T14:39:21Z 2011-02-02T14:39:21Z jQuery - Objekte aneinander hängen <blockquote> <p>return $(this).find(str + ' .hallo');</p> </blockquote> <p>Sorry, natürlich ohne Leerzeichen im Selektor: '.hallo'. Wie du auch geschrieben hast.</p> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492307#m1492307 Joachim wendenburg@t-online.de http://www.schwarz-weiss.net 2011-02-02T19:10:44Z 2011-02-02T19:10:44Z jQuery - Objekte aneinander hängen <p>Hi,</p> <blockquote> <p>Verstehe ich gerade etwas falsch oder wieso der Umweg?</p> </blockquote> <p>Naja, das Testproblem lässt sich ja sogar noch einfacher lösen:<br> $("div p.hallo");</p> <p>... findet alle in divs steckenden p-tags der Klasse "hallo". Aber mir gings ja eher darum, ihn auf die grundsätzlichen Strukturen beim Pluginbauen zu stossen...</p> <p>Gruesse, Joachim</p> <div class="signature">-- <br> Am Ende wird alles gut. </div> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492308#m1492308 molily zapperlott@gmail.com 2011-02-03T18:03:11Z 2011-02-03T18:03:11Z jQuery - Objekte aneinander hängen <blockquote> <p>Aber mir gings ja eher darum, ihn auf die grundsätzlichen Strukturen beim Pluginbauen zu stossen...</p> </blockquote> <p>Okay. Der Fehler von johny7 war ja, dass er bloß ein nacktes Objekt anstatt eines jQuery-Objekts zurückgegeben hat. Also wäre eine direkte Antwort:</p> <pre><code class="block language-javascript">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">myfilter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> retObj <span class="token operator">=</span> <span class="token function">jQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// erzeuge leeres jQuery-Objekt, [link:http://api.jquery.com/jQuery/#returning-empty-set@title=ab jQuery 1.4] </span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'hallo'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// Hier wird jetzt retObj einfach überschrieben. </span> <span class="token comment">// Wie mache ich es aber, dass es angehängt wird, damit am Ende ein Objekt-Set herauskommt? </span> retObj <span class="token operator">=</span> retObj<span class="token punctuation">.</span><span class="token punctuation">[</span>link<span class="token operator">:</span>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>api<span class="token punctuation">.</span>jquery<span class="token punctuation">.</span>com<span class="token operator">/</span>add<span class="token operator">/</span>@title<span class="token operator">=</span>add<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// so geht es --molily </span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> retObj<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wie gesagt, das ist natürlich so ineffizient, es geht nur um das Prinzip des Zusammenbauens eines jQuery-Objekts.</p> <p>Was diesen Code angeht:</p> <pre><code class="block language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span><span class="token punctuation">{</span> $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">myfilter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str <span class="token operator">+</span> <span class="token string">".hallo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span>myfilter<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> $<span class="token punctuation">.</span>myfilter <span class="token operator">=</span> <span class="token punctuation">{</span> store<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span> jQuery <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Anstelle von each will man beim Filtering ja mehr eine map-Operation:</p> <pre><code class="block language-javascript">$<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">myfilter</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token punctuation">[</span>link<span class="token operator">:</span>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>api<span class="token punctuation">.</span>jquery<span class="token punctuation">.</span>com<span class="token operator">/</span>map<span class="token operator">/</span>@title<span class="token operator">=</span>map<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str <span class="token operator">+</span> <span class="token string">".hallo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>Auch das wieder nur zur Veranschaulichung. Da das jQuery-Objekt selbst eine Liste ist, ist jede Filteroperation als map() umgesetzt. Deshalb macht obiger Code dasselbe wie das besagte kurze <code class="language-javascript"><span class="token keyword">return</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>str <span class="token operator">+</span> <span class="token string">".hallo"</span><span class="token punctuation">)</span></code>.</p> <p>Mathias</p> https://forum.selfhtml.org/self/2011/feb/2/jquery-objekte-aneinander-haengen/1492311#m1492311 molily zapperlott@gmail.com 2011-02-03T18:07:09Z 2011-02-03T18:07:09Z jQuery - Objekte aneinander hängen <blockquote> <p>return $(this).find(str).hasClass('hallo'));</p> </blockquote> <p><a href="http://api.jquery.com/hasClass/" rel="nofollow noopener noreferrer">hasClass</a> ist keine Filterfunktion, sondern untersucht alle Elemente in der Liste und gibt einen Boolean zurück. Also true, wenn ein Element darin zur angegebenen Klasse gehört (»Determine whether any of the matched elements are assigned the given class«).</p> <p>Eine Filterfunktion wäre z.B. <a href="http://api.jquery.com/filter" rel="nofollow noopener noreferrer">filter(".hallo")</a>.</p> <p>Mathias</p>