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>