zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery Kochbuch Beispiel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2014, 11:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard jQuery Kochbuch Beispiel

Hi ich beschäftige mich gerade mit dem jQuery Kochbuch Beispiel Seite 28-29. (O´Reilly Verlag 2010) DOM-Elemente Klonen.
So sieht das Beispiel laut Buch aus: Edit fiddle - JSFiddle
HTML-Code:
<style>
ul#a{border: 1px solid #aaa;} /*grau*/
ul#b{border: 1px solid #FFFF00;} /*gelb*/
</style>

<ul id="a">
    <li><a href="#" class="remove">Name </a></li>
    <li><a href="#">Name </a></li>
    <li><a href="#" class="remove">Name </a></li>
    <li><a href="#" class="remove">Name </a></li>
    <li><a href="#">Name </a></li>
    <li><a href="#" class="remove">Name </a></li>
    <li><a href="#">Name </a></li>
    <li><a href="#" class="remove">Name </a></li>
   </ul>
  <ul id="b"></ul>


<script>
// Selektiere das <ul>-Elementen mit dem id-Attribut a.
jQuery('ul#a li')
    .click(function()
           { //Click-Events zu jedem <li>-Element hinzufügen.
               alert('List-Item angeklickt!')
           })
    .clone(true) // Das selektierte Element Klonen
        .find('li') //In den geklonten Elementen alle <li>-Elemente auswählen
    .appendTo('#b');// Die geklonten Elemente im Element mit dem id-Attribut b anhängen.
    .end() // Zurückkehren zum zuvor selektierten <ul id="b">-Element? oder Wrapperset?
    .end() // Zurückkehren zum zuvor selektierten <ul id="a">-Element? oder Wrapperset?
    .remove(); //Entfernen des ursprünglichen <ul>-Element.

</script>
Ich habe zusätzlich das Stylesheet hinzugefügt um zu sehen ob es auch funktioniert.
Beim testen ist mir aufgefallen, dass es da einen Fehler gibt
und zwar wird das Ausgangs <ul id="a">-Element nicht gelöscht.
oder habe ich an dieser Stelle was falsch verstanden?
Meint der Autor vielleicht das <ul> Wrapperset.
Beim .end() bin ich mir auch nicht ganz schlüssig was nun gemeint ist.
Grüße
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.01.2014, 12:30
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Da ist wohl ein .end() im Seitenumbruch verloren gegangen, wenn man es aber mit der entsprechenden Einrückung schreibt, könnte einem das auch auffallen Edit fiddle - JSFiddle
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.01.2014, 13:52
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Danke, also ein Druckfehler. Es ist also immer gut wenn man das gelesene noch einmal ausprobiert.
Bleibt noch die Frage mit dem .end() ,(Zurückkehren zum zuvor selektierten <ul id="b">-Element? oder ist damit das Wrapperset gemeint?

Und noch eine Frage: wo steht jetzt eigentlich das Klick-Event? ich kann es nicht finden. Aber funktionieren tut es.
Grüße
Nachtrag:
Ich habe Wrapperset mal dahinter geschrieben wo ich denke das es ist.
Edit fiddle - JSFiddle

Geändert von gabischatz (20.01.2014 um 14:10 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.01.2014, 14:19
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Das mit dem .end() ist hier schwierig, da die selection in der function clone auch nochmal bspw. dann auf dem letzten Element stehen könnte (was ich vermute) und deshalb erstmal auf li allgemein zurückgegangen werden muss.

Edit - genau wie du in deinem Nachtrag schreibst, so denk ich das

Zitat:
Zitat von gabischatz Beitrag anzeigen
Und noch eine Frage: wo steht jetzt eigentlich das Klick-Event? ich kann es nicht finden. Aber funktionieren tut es.
Grüße
Durch .clone(true) kopierst du die event-bindings mit, mit .clone() bzw. .clone(false) nur die aktuelle collection. Edit fiddle - JSFiddle
Mit Zitat antworten
  #5 (permalink)  
Alt 20.01.2014, 14:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Ok, Danke noch einmal.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.01.2014, 15:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard .filter(':first')

Hi ich habe eine weitere Frage: Edit fiddle - JSFiddle

Im jQuery Kochbuch Beispiel Seite 41 steht .filter(':first') .
Der hat aber gar keine Auswirkung bei mir.
Kann es sein, dass da etwas fehlt?
Grüße
Mit Zitat antworten
  #7 (permalink)  
Alt 21.01.2014, 15:16
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von gabischatz Beitrag anzeigen
Kann es sein, dass da etwas fehlt?
Ja, die CSS Klasse 'b'
Mit Zitat antworten
  #8 (permalink)  
Alt 21.01.2014, 15:44
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Da es noch nicht korrigiert ist...
Statt #b musst du.b schreiben, das # steht in CSS für eine ID, die du nicht hast.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.01.2014, 16:13
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Und warum nicht
Code:
 $('ul li').first().addClass('b');
nutzen?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.01.2014, 16:34
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Und warum nicht
Code:
 $('ul li').first().addClass('b');
nutzen?
Weil es hier nicht um first sondern um Filter allgemein geht, damit kann man ja z.B. auch sowas machen Edit fiddle - JSFiddle
also :lt(x) - alle mit Index kleiner x
oder :gt(y) - alle mit Index größer y
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Das jQuery UI Accordion Plugin ohne jquery kenntnisse nutzen? papalapap Javascript & Ajax 8 13.08.2012 23:00
Jquery Effekte wie und wo anfangen? Beispiel hier Andimau Javascript & Ajax 4 20.05.2012 18:42
Warum geht das nicht? HTML5junkie CSS 4 14.11.2011 17:07
jQuery (coda slider) und prototype (Lightbox) konflikt computernerd Javascript & Ajax 3 21.09.2011 20:04
JQuery + Wordpress VoinG Javascript & Ajax 0 29.12.2008 17:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:16 Uhr.