zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2013, 20:46
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard Mit jQuery Zeilen nummerieren

Hi, ich setze schon seit längeren mein jQueryscript zum nummerieren der Zeilen ein. Das Script hat aber einen Schönheitsfehler und zwar wird die Nummerierung
bei jeder neuen Codezeile fortgesetzt, der Zähler also nicht auf die gewünschte Zahl.
Kurzfassung:
  1. data-line ist die Zahl mit der die Nummerierung beginnt.
  2. Es soll alle Elemente duch nummeriert werden die als class="number" besitzen.
  3. Ist eine neue data-line wird diese Zahl weiterverwendet
HTML-Code:
<p>
<!--StartFragment--><sub class="datei"><strong>CSS-Frame</strong>-Code</sub>
<small class="highlight-datei">highlight- as: html</small><code class="codebox" title="Klicken Sie auf den Code, um ihn zu markieren.">
<span class="number new " data-line="1" ></span>

<br /><span class="number">&nbsp;</span>Zeile1
<br /><span class="number">&nbsp;</span>Zeile2
<br /><span class="number">&nbsp;</span>Zeile3
<br /><span class="number">&nbsp;</span>Zeile4
<br /><span class="number">&nbsp;</span>Zeile5
<br /><span class="number">&nbsp;</span>Zeile6
<br /><span class="number">&nbsp;</span>Zeile6
<br /><span class="number">&nbsp;</span>Zeile8
<br /><span class="number">&nbsp;</span>Zeile9

</code>

<p>
<!--StartFragment--><sub class="datei"><strong>CSS-Frame</strong>-Code</sub>
<small class="highlight-datei">highlight- as: html</small>
<code class="codebox" title="Klicken Sie auf den Code, um ihn zu markieren.">
<span class="number new " data-line="1" ></span>

<br /><span class="number">&nbsp;</span>Zeile1
<br /><span class="number">&nbsp;</span>Zeile2
<br /><span class="number">&nbsp;</span>Zeile3
<br /><span class="number">&nbsp;</span>Zeile4
<br /><span class="number">&nbsp;</span>Zeile5
<br /><span class="number">&nbsp;</span>Zeile6
<br /><span class="number">&nbsp;</span>Zeile6
<br /><span class="number">&nbsp;</span>Zeile8
<br /><span class="number">&nbsp;</span>Zeile9
</code>
Code:
jQuery(document).ready(function(){
	var l=0;
	if ($("code.codebox").find("span.nev")){
	  $( "span.numbers" ).each(function( index ) {
		l++;
	      if ($(index).data("line")){
				l =  $(index).data("lines");
	    }
	    $(index).css('color','red');
	   $(this).find("numbers").remove().end().prepend('<span class="lines">' + l  + ". </span>");
	  });
	}
});
Beispielseite beide Code-Blöcke sollen mit 1 anfangen.
Mit freundlichen Gruß gabischatz
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.11.2013, 21:03
?!?
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

Warum nutzt du nicht CSS und die Eigenschaft counter?
Beispiel dazu bei Mozilla unter https://developer.mozilla.org/en-US/...e/CSS/Counters
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.11.2013, 21:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Weil ich die gar nicht kannte, wird das schon von allen Browsern unterstützt?
Mit Zitat antworten
  #4 (permalink)  
Alt 07.11.2013, 21:24
?!?
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

Ab >IE7, sowie von allen anderen Browsern.
Siehe auch Can I use CSS Counters
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.11.2013, 21:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Ja Danke. Würde aber trotz alle dem eine Lösung meines Problems anstreben um weiter jQuery zu lernen.
Und wie kann ich mit einer nummer 5 weiter nummerrieren?
Edit fiddle - JSFiddle
Gefunden danke
Code:
style="counter-reset: section+5;"
geht bei 6 weiter.
Grüsse

Geändert von gabischatz (07.11.2013 um 22:14 Uhr) Grund: Lösung gefunden
Mit Zitat antworten
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 - alternierende Zeilen axelf Javascript & Ajax 4 27.01.2012 00:33
jquery beim klick html seite öffnen?! dimo21 Javascript & Ajax 3 21.09.2011 21:20
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 11:13 Uhr.