• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] fortlaufende Zahlen in <div>-Container erstellen

D

DeKlu1

New member
Hallo Leute, ich bräuchte mal kurz einen Rat,

ich hab als Aufgabe 100 <div> über eine schleife zu erstellen, diese dann als box darstellen zu lassen und in darin sollen jeweils die fortlaufenden Zahlen dargestellt werden.

Ich habe es jetzt soweit das die 100 <div> erzeugt werden und es auch als box mit css gestylt wird, allerdings bekomme ich nicht die fortlaufenden Zahlen hinein. Könntet ihr mir helfen, wie ich das machen kann ?

Am Ende soll es so aussehen:
Unbenannt.PNG

Hier mein Code:
Code: 
$(document).ready(function () {
    for (var i = 1; i < 101; i++) {
        $('<div/>', { 'class': 'boxelement', 'id': +i }).appendTo("body");
        $('<br/>').appendTo("body");
    }
    $('<h1>Nummer</h1>').appendTo("div");
});

und mein HTML Dokument:
HTML: 
<! doctype html >
<html>
<head>
    <meta charset="utf =8">
    <link rel=" stylesheet " href =" client.css ">
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script language="JavaScript" type="text/javascript" src="client.js"></script>
</head>
<body>

</body>
</html>

Momentan sieht es nur so aus:
Unbenannt2.PNG
 
mikdoe schrieb:
das setzen des inhalts muss in die schleife und dann i verwenden
Zum Vergrößern anklicken....

Genau das habe ich mir auch gedacht, wenn ich dies jedoch ebenfalls in die schleife einbaue und das i verwende, schreibt er mir in jeden div container jeweils die zahlen 1-100, ich möchte allerdings nur in jedem container eine zahl stehen haben.

kannst du mir hier mal den code sagen, wie du das machen würdest ?
 
mikdoe schrieb:
ungetestet:
HTML: 
$(document).ready(function () {
    for (var i = 1; i < 101; i++) {
        $('<div>', { 'class': 'boxelement', 'id':+i, 'innerHTML':'<h1>'+i+'</h1>' }).appendTo("body");
        $('<br>').appendTo("body");
    }
});

zum id attribut: vorsicht wenn das mit ziffern beginnen soll!! ==> HTML5 erlaubt nahezu alles für das id-Attribut
Zum Vergrößern anklicken....

Schonmal Danke für die Antwort.

Sieht auf jeden fall schonmal besser aus als bei mir zumindest wenn ich untersuche, allerdings schreibt er noch nicht die zahlen hinein. Stylen muss ich hier nichts oder ?

Vielleicht hast du ja noch ne idee.

Hier mal wie es aussieht:

Unbenannt3.PNGUnbenannt4.PNG
 
nimm mal pures js für die schleife und kein jQuery. hat den vorteil, dass ggf. in der console (F12 im browser) fehler ausgegeben werden.

ungetestet:
HTML: 
$(document).ready(function () {
    for (var i = 1; i < 101; i++) {
        var d = document.createElement('div');
        d.innerHTML = '<h1>'+i+'</h1>';
        d.id = +i;
        d.className = 'boxelement';
        document.getElementsByName('body')[0].appendChild(d);
    }
});

übrigens: das <br> ist nach einem div überflüssig; es sei denn, das css definiert was gegenteiliges
 
AW: fortlaufende Zahlen in &lt;div&gt;-Container erstellen

Jetzt erstellt er leider gar nichts mehr. hat irgendwie ein Problem mit d.id

Der andere code hat mir etwas besser gefallen :d

Vielleicht wenn du zeit hast kannst du es bei dir ja mal testen um zu schauen ob es bei dir funktioniert..

- - - Aktualisiert - - -

Habs gelöst :)

Danke trotzdem für eure Hilfe
 
Zuletzt bearbeitet von einem Moderator:
AW: fortlaufende Zahlen in &lt;div&gt;-Container erstellen

DeKlu1 schrieb:
Jetzt erstellt er leider gar nichts mehr. hat irgendwie ein Problem mit d.id
Zum Vergrößern anklicken....
wie lautete die fehlermeldung?

DeKlu1 schrieb:
Der andere code hat mir etwas besser gefallen :d
Zum Vergrößern anklicken....
das ist schade, weil man bei jQuery keine fehlermeldungen bekommt, von daher m. e. nicht für anfänger geeignet. der umgang mit der console ist dir geläufig? m. e. unverzichtbar.

DeKlu1 schrieb:
Habs gelöst :)
Zum Vergrößern anklicken....
wie sieht der code jetzt aus?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben