html code per javascript einfügen

[thme]

Hallo Zusammen

Meine Frage mag etwas komisch klingen... Ich bin gerade dabei eine Website zu programmieren. In HTML habe ich eine <ul> Liste erstellt, welche von <ol> gruppierte <li>-Elemente enthält:

<ul class="ff-items">
					 <ol>
                    <li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/366400-Chameleon">
							<span>Chameleon</span>
							<img src="images/1.jpg"/>
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
							<span>Tutorials (wip)</span>
							<img src="images/2.jpg" />
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/138484-Symplas-website">
							<span>Symplas website</span>
							<img src="images/4.jpg" />
						</a>
					</li>
                    </ol>
                    <ol>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/188524-Event-Planning">
							<span>Event Planning</span>
							<img src="images/9.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/347197-Cake">
							<span>Cake</span>
							<img src="images/6.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/372566-Flower">
							<span>Flower</span>
							<img src="images/3.jpg" />
						</a>
					</li>
                    </ol>
		  <ol>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/188524-Event-Planning">
							<span>Event Planning</span>
							<img src="images/9.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/347197-Cake">
							<span>Cake</span>
							<img src="images/6.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/372566-Flower">
							<span>Flower</span>
							<img src="images/3.jpg" />
						</a>
					</li>
                    </ol>
                   <ol>
                    			<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/366400-Chameleon">
							<span>Chameleon</span>
							<img src="images/1.jpg"/>
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
							<span>Tutorials (wip)</span>
							<img src="images/2.jpg" />
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/138484-Symplas-website">
							<span>Symplas website</span>
							<img src="images/4.jpg" />
						</a>
					</li>
                    </ol>
                     <ol>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/188524-Event-Planning">
							<span>Event Planning</span>
							<img src="images/9.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/347197-Cake">
							<span>Cake</span>
							<img src="images/6.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/372566-Flower">
							<span>Flower</span>
							<img src="images/3.jpg" />
						</a>
					</li>
                    </ol>
                    <ol>
					<li class="ff-item-type-3">
						<a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-">
							<span>TRON: Mobile version</span>
							<img src="images/5.jpg" />
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/186199-Tailoring-accessories">
							<span>Tailoring accessories</span>
							<img src="images/7.jpg" />
						</a>
					</li>
					<li class="ff-item-type-3">
						<a href="http://dribbble.com/shots/133859-App-icon">
							<span>App icon</span>
							<img src="images/8.jpg" />
						</a>
					</li>
                    </ol>
                    <ol>
                    			<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/366400-Chameleon">
							<span>Chameleon</span>
							<img src="images/1.jpg"/>
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
							<span>Tutorials (wip)</span>
							<img src="images/2.jpg" />
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/138484-Symplas-website">
							<span>Symplas website</span>
							<img src="images/4.jpg" />
						</a>
					</li>
                    </ol>
                    <ol>
                   			 <li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/366400-Chameleon">
							<span>Chameleon</span>
							<img src="images/1.jpg"/>
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/272575-Tutorials-wip-">
							<span>Tutorials (wip)</span>
							<img src="images/2.jpg" />
						</a>
					</li>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/138484-Symplas-website">
							<span>Symplas website</span>
							<img src="images/4.jpg" />
						</a>
					</li>
                    </ol>
                    <ol>
					<li class="ff-item-type-1">
						<a href="http://dribbble.com/shots/188524-Event-Planning">
							<span>Event Planning</span>
							<img src="images/9.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/347197-Cake">
							<span>Cake</span>
							<img src="images/6.jpg" />
						</a>
					</li>
					<li class="ff-item-type-2">
						<a href="http://dribbble.com/shots/372566-Flower">
							<span>Flower</span>
							<img src="images/3.jpg" />
						</a>
					</li>
                    </ol>
				</ul>

Ich hätte gerne immer nach jedem 4. <ol>-Element ein div mit der Eigenschaft "clear: both;" eingefügt. Die <ol> werden aber später beliebig erweitert, sodass sich die Reihenfolge stetig ändert.

Ist es möglich mit javascript automatisch nach jedem 4. <ol>-Element eine Zeile einzufügen?:

<div class="clr"></div>

Vielen Dank für eure Antworten und eure Zeit.

 

[Gast2]

Ich hätte gerne immer nach jedem 4. <ol>-Element ein div mit der Eigenschaft "clear: both;" eingefügt.

Dafür würde ich jQuery nutzen:

$('.ff-items > ol').each(function (index) {
  if ((index + 1) % 4 == 0) {
    $('<div />').css('clear', 'both').insertAfter ($(this));
  }
});

 

[thme]

Vielen Dank für die Schnelle Antwort!
Das werde ich gleich mal ausprobieren...

 

[thme]

Also leider funktioniert es noch nicht recht, liegt bestimmt an mir.

Wenn ich jQuery nutzen will, muss ich ja die Libraries im Head einfügen. Ich habe also folgendes in den Head kopiert:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

und dazu den code von EikeB:

<script type="text/javascript">
$('.ff-items > ol').each(function (index) {
  if ((index + 1) % 4 == 0) {
    $('<div />').css('clear', 'both').insertAfter ($(this));
  }
});
</script>

was mach ich falsch?

 

[faetzminator]

Willst du an den Source nicht noch ein [c]http://[/c] hängen?
Ansonsten, ich speicher die immer lokal und bind die vom localhost ein...

 

[thme]

Ach herje, also habe jetzt "jquery-1.8.3.js" lokal eingebunden. Jetzt habe ich die Kontrolle ob es wirklich geladen ist. leider funktioniert es immer noch nicht.

Wenn ich im Firebug im Code nachschaue, sehe ich keine eingefügten Elemente zwischen den <ol>, oder sieht man die nicht wenn die per js eingefügt werden?

PS: oh! habe gerade gesehen, in safari funktioniert es! nur nicht in Firefox...

 

[Gast2]

Den Code oben habe ich nur ausm Kopf runtergeschrieben.
Der ist bestimmt nicht fehlerfrei, schon gar nicht in allen Browsern. Du kannst dir im Firebug mal anschauen ob Fehler angezeigt werden, oder das ganze per console.log debuggen.

 

[thme]

Also ich habe im Firebug keine Fehler gefunden... Aber ich danke euch für eure Hilfe, ich fürchte ich muss an dieser Stelle aufgeben, das wir sonst ein riesiges Flickwerk. Trotz dem habe ich wider viel gelernt und bin ein Stückchen weitergekommen 🙂