[Erledigt] jQuery Selector-Arrayelemente mit jQuery-Funktionen behandeln

Arne Drews · 30.09.2010, 16:30

Naja, der Titel is' nicht der Hammer, aber mir fiel nichts besseres ein in der Kürze.

Ich hole mir mit jQuery ein Array, das Objekte enthält:

Code:

$('.myClass')

Ich möchte aber gerne gleich auf die einzelnen Elemente eingehen, also so z.B.:

Code:

alert( $('.myClass')[0].attr('title') );

Da wird der Fehler geworfen, daß $('.myClass')[0].attr('title') keine Funktion sei!

Klar, ich kann fogendermassen zugreifen:

Code:

alert( $('.myClass')[0].title );

Die Geschichte mit dem Title ist auch nur zur Verdeutlichung.
Ich würde gerne mit jQuery-Funktionen auf die einzelnen Elemente eingehen.

Bekomme grad nicht raus, wie ich das anstelle...
Danke!

rudygotya · 30.09.2010, 17:22

Schau doch mal unter traversing nach. Z.b. per each, find, etc ..

Arne Drews · 30.09.2010, 17:32

Ja, danke für die Antwort. Probiere gerade mit each() rum.
Ist wohl das was ich brauche.

Hänge gerade bloß an einer weiterführende Sache.
Aber das bekomm ich schon raus...

Thx!

nikosch · 30.09.2010, 17:42

PHP-Code:

  alert( $('.myClass:first').attr('title') );
alert( $('.myClass:eq(5)').attr('title') );

each ist meist nicht nötig. Und für einzelne Elemente im Gegenteil eher .eq() oder get() [nativer DOM Zugriff] - wenn man keinen Einfluss auf den Selektor hat z.B. oder bei mehreren selektierten Elementtypen:

PHP-Code:

  alert( $('.myClass,.myOtherClass').eq(0).attr('title') );

Arne Drews · 30.09.2010, 17:45

Ach schau an... Letzteres kannte ich nicht!
Bleibe wohl bei each() für diesen Fall, aber danke für den Tipp...

Thx

nikosch · 30.09.2010, 17:54

Zeig mal den konkreten Fall.

Arne Drews · 30.09.2010, 18:51

Is nur'n einfacher Slider, der Images übereinander faden soll, ohne das letzte Bild erst auszufaden.
Wenn die Seite nur einen Slider hat, klappte die Variante wunderbar, nur möchte ich das so umbauen,
daß ich auch mal zwei oder drei Boxen sliden lassen kann.

So sieht mein Versuch aus:

Code:

function initSlide() {
  $('.dpSlide').each(function() {
    slideName = $(this).attr('title');

    $(this).css('background-image', $('span', $(this)).css('background-image'));
    $('span', $(this)).fadeOut(800, function() {
      dpSlides.Counter[slideName]++;
      if(dpSlides.Counter[slideName] == dpSlides[slideName].length) dpSlides.Counter[slideName] = 0;
      $('span', $(this)).css('background-image', 'url(' + dpSlides[slideName][dpSlides.Counter[slideName]] + ')');
    });
    $('span', $(this)).fadeIn(800);
  });

  setTimeout('initSlide()', 5000);
}

Ich habe über Debugging festgestellt, daß der Fehler in diesem Ausdruck liegen muß:

Code:

$('span', $(this)).css(...)

Habe irgendwo gelesen, daß man das so machen kann. Hatte aber jetzt noch nicht die Gelegenheit das mit child() oder so zu testen...

Das HTML sieht so aus:

Code:

<div class="dpSlide slideBig" title="welchebilder"><span></span></div>

Das Attribut title verwende ich hier um über das JavaScript Objekt dpSlider auf die richtigen Bilder und den richtigen Counter zugreifen zu können.

Kann auch sein, daß ich total daneben liege?!
Danke schonmal für Deine Kritik.

nikosch · 30.09.2010, 19:06

Zitat:

$('span', $(this))

Stimmt aber. Benutze ich sehr oft.

Kann ehrlich gesagt dem Codebeispiel oben so ad hoc nicht folgen.

Arne Drews · 30.09.2010, 19:14

Komplett sieht das so aus:

Code:

var dpSlides = new Object();
  dpSlides.Counter.Bilder = 0;
  dpSlides.Bilder = new Array("./images/laden/Laden1.jpg", "./images/laden/Laden10.jpg", "./images/laden/Laden11.jpg", "./images/laden/Laden15.jpg", "./images/laden/Laden17.jpg", "./images/laden/Laden19.jpg", "./images/laden/Laden3.jpg", "./images/laden/Laden4.jpg", "./images/laden/Laden6.jpg", "./images/laden/Laden7.jpg", "./images/laden/Laden8.jpg", "./images/laden/Laden9.jpg");



function initSlide() {
  $('.dpSlide').each(function() {
    slideName = $(this).attr('title');

    $(this).css('background-image', $('span', $(this)).css('background-image'));
    $('span', $(this)).fadeOut(800, function() {
      dpSlides.Counter[slideName]++;
      if(dpSlides.Counter[slideName] == dpSlides[slideName].length) dpSlides.Counter[slideName] = 0;
      $('span', $(this)).css('background-image', 'url(' + dpSlides[slideName][dpSlides.Counter[slideName]] + ')');
    });
    $('span', $(this)).fadeIn(800);
  });

  setTimeout('initSlide()', 5000);
}

Entsprechend HTML:

Code:

<div class="dpSlide slideBig" title="Bilder"><span></span></div>

Also bei Testausgaben schreibt er "undefined" bei mir.

Bei folgender Ausgabe kommt der korrekte Wert:

Code:

alert( dpSlides[slideName][dpSlides.Counter[slideName]] );

Weise ich das aber dem span zu, kommt hinterher undefined:

Code:

$('span', $(this)).css('background-image', 'url(' + dpSlides[slideName][dpSlides.Counter[slideName]] + ')');

// Anschliessende Ausgabe führt zu undefined:
alert( $('span', $(this)).css('background-image') );

Da hänge ich...

Arne Drews · 01.10.2010, 17:53

Ok, habe festgestellt, daß es an der letzten Zeile folgender Funktion liegt:

Code:

$('span', $(this)).fadeOut(800, function() {
  dpSlides.Counter[slideName]++;
  if(dpSlides.Counter[slideName] == dpSlides[slideName].length) dpSlides.Counter[slideName] = 0;
  $('span', $(this)).css('background-image', 'url(' + dpSlides[slideName][dpSlides.Counter[slideName]] + ')');
});

die objektinstanz this ist hier gar nicht mehr existent. Daher das undefined.
Leider muß die Zeile in der Funktion bleiben, da ansonsten ein "Sprung" in der Überbelndung ist.

Habt Ihr 'n Rat, wie ich die Objektinstanz mit in die "Callback" Funktion bekomme?

Probiert habe ich spontan mal

Code:

$('span', $(this)).fadeOut(800, function(this) {

was natürlich nicht funktionert, war 'ne Verzweiflungstat...

Wär nett, wenn Ihr 'n Tipp hättet

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP Default charset für Funktionen	MasterQ	PHP-Fortgeschrittene	6	06.01.2011 10:03
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
Templatesystem mit Funktionen und Variablen drin?	BartTheDevil89	PHP Tipps 2008	6	01.07.2008 09:32
Klassen und externe Funktionen ?	ssm	PHP-Fortgeschrittene	17	18.07.2007 11:59
Funktionen überprüfen und Grafik Funktionen	hans.karl2	PHP Tipps 2006	10	31.07.2006 20:08
Funktionen in Funktionen - ist das gut?	Schneckenkind	PHP Tipps 2006	23	10.06.2006 13:39
Globale Variabeln in Funktionen	finerip	PHP Tipps 2007	3	28.11.2005 16:00
Funktionen Erklärung	TheSkaterFriend	PHP Tipps 2004	14	11.06.2004 22:05

30.09.2010, 16:30
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	[Erledigt] jQuery Selector-Arrayelemente mit jQuery-Funktionen behandeln Naja, der Titel is' nicht der Hammer, aber mir fiel nichts besseres ein in der Kürze. Ich hole mir mit jQuery ein Array, das Objekte enthält: Code: $('.myClass') Ich möchte aber gerne gleich auf die einzelnen Elemente eingehen, also so z.B.: Code: alert( $('.myClass')[0].attr('title') ); Da wird der Fehler geworfen, daß $('.myClass')[0].attr('title') keine Funktion sei! Klar, ich kann fogendermassen zugreifen: Code: alert( $('.myClass')[0].title ); Die Geschichte mit dem Title ist auch nur zur Verdeutlichung. Ich würde gerne mit jQuery-Funktionen auf die einzelnen Elemente eingehen. Bekomme grad nicht raus, wie ich das anstelle... Danke! __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.09.2010, 17:22
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Schau doch mal unter traversing nach. Z.b. per each, find, etc .. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

30.09.2010, 17:32
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Ja, danke für die Antwort. Probiere gerade mit each() rum. Ist wohl das was ich brauche. Hänge gerade bloß an einer weiterführende Sache. Aber das bekomm ich schon raus... Thx! __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

30.09.2010, 17:42
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	PHP-Code: `alert( $('.myClass:first').attr('title') ); alert( $('.myClass:eq(5)').attr('title') );` each ist meist nicht nötig. Und für einzelne Elemente im Gegenteil eher .eq() oder get() [nativer DOM Zugriff] - wenn man keinen Einfluss auf den Selektor hat z.B. oder bei mehreren selektierten Elementtypen: PHP-Code: `alert( $('.myClass,.myOtherClass').eq(0).attr('title') );` __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (30.09.2010 um 17:45 Uhr).

30.09.2010, 17:45
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Ach schau an... Letzteres kannte ich nicht! Bleibe wohl bei each() für diesen Fall, aber danke für den Tipp... Thx __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

30.09.2010, 17:54
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Zeig mal den konkreten Fall. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

30.09.2010, 18:51
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Is nur'n einfacher Slider, der Images übereinander faden soll, ohne das letzte Bild erst auszufaden. Wenn die Seite nur einen Slider hat, klappte die Variante wunderbar, nur möchte ich das so umbauen, daß ich auch mal zwei oder drei Boxen sliden lassen kann. So sieht mein Versuch aus: Code: function initSlide() { $('.dpSlide').each(function() { slideName = $(this).attr('title'); $(this).css('background-image', $('span', $(this)).css('background-image')); $('span', $(this)).fadeOut(800, function() { dpSlides.Counter[slideName]++; if(dpSlides.Counter[slideName] == dpSlides[slideName].length) dpSlides.Counter[slideName] = 0; $('span', $(this)).css('background-image', 'url(' + dpSlides[slideName][dpSlides.Counter[slideName]] + ')'); }); $('span', $(this)).fadeIn(800); }); setTimeout('initSlide()', 5000); } Ich habe über Debugging festgestellt, daß der Fehler in diesem Ausdruck liegen muß: Code: $('span', $(this)).css(...) Habe irgendwo gelesen, daß man das so machen kann. Hatte aber jetzt noch nicht die Gelegenheit das mit child() oder so zu testen... Das HTML sieht so aus: Code: <div class="dpSlide slideBig" title="welchebilder"><span></span></div> Das Attribut title verwende ich hier um über das JavaScript Objekt dpSlider auf die richtigen Bilder und den richtigen Counter zugreifen zu können. Kann auch sein, daß ich total daneben liege?! Danke schonmal für Deine Kritik. __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

01.10.2010, 17:53
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	Ok, habe festgestellt, daß es an der letzten Zeile folgender Funktion liegt: Code: $('span', $(this)).fadeOut(800, function() { dpSlides.Counter[slideName]++; if(dpSlides.Counter[slideName] == dpSlides[slideName].length) dpSlides.Counter[slideName] = 0; $('span', $(this)).css('background-image', 'url(' + dpSlides[slideName][dpSlides.Counter[slideName]] + ')'); }); die objektinstanz this ist hier gar nicht mehr existent. Daher das undefined. Leider muß die Zeile in der Funktion bleiben, da ansonsten ein "Sprung" in der Überbelndung ist. Habt Ihr 'n Rat, wie ich die Objektinstanz mit in die "Callback" Funktion bekomme? Probiert habe ich spontan mal Code: $('span', $(this)).fadeOut(800, function(this) { was natürlich nicht funktionert, war 'ne Verzweiflungstat... Wär nett, wenn Ihr 'n Tipp hättet __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein