# DOM Reihenfolge von Elementen ändern..



## redhat99 (25. Oktober 2011)

Hallo,

ich habe folgenden Code


```
<div class="layout_latest block first even">
      <h2 class="first"><a title="Den Artikel lesen: Regierungsjet A340 in Tokio-Haneda" href="aktuelles/regierungsjet-a340-in-tokio-haneda">Regierungsjet A340 in Tokio-Haneda</a></h2>


	
 <div class="teaser">

 <span class="info"></span>
<h3>hdeuhdu</h3>
<iframe height="354" frameborder="0" width="637" src="http://www.youtube.com/embed/Oe2fZL5MNI4"></iframe>
<p>Der A340 der Bundesregierung ist zurzeit in Tokio-Haneda abgestellt. Bundespräsident Christian Wulff reiste am 23. Oktober 2011 zu einem offiziellen Besuch nach Japan. Grund der Reise: Die Aufnahme diplomatischer Beziehungen zu Japan jährt sich zum 150. Mal. Am zweiten Tag seines Besuchs wurde der Bundespräsident von Kaiser Akihito im Kaiserlichen Palast in Tokio empfangen. Außerdem traf er Ministerpräsident Yoshihiko Noda, Umweltminister G?shi Hosono und Wirtschaftsvertreter zu Gesprächen. Die Reise soll bis zum 28. Oktober 2011 dauern.</p> 
      
</div>

</div>
```


ich möchte nun, das iframe mittels jquery direkt nach der H2 anzeigen lassen. span.info und h3 nach dem iframe.

Mein Problem, mit 

```
$('.layout_latest .teaser > h3').next('p iframe').addClass('video').insertAfter('h2')
	});
```

wird jedes iframe auf der seit dahinter angezeigt. Das ganze kommt natürlich öfter vor, und es soll jedes mal nur das eine element ansprechen und nicht alle iframes auf der seite. 
Wie filter/selektiere Ich das am einfachsten!?


----------



## CPoly (25. Oktober 2011)

Meinst du so was?


```
$('.layout_latest').each(function() {
	var $this = $(this);
	
	$this.find('> .teaser > iframe').insertAfter( $this.find('> h2') );
});
```

Ich bin nicht sicher, ob ich dich verstanden habe.


----------



## redhat99 (26. Oktober 2011)

ja, du hast es richtig verstanden, nur leider funktioniert das so auch nicht.. echt verzwickt das ganze.


----------



## CPoly (26. Oktober 2011)

redhat99 hat gesagt.:


> nur leider funktioniert das so auch nicht



Und was genau funktioniert nicht? Bei mir schiebt er beliebig viele IFrames hinter die jeweiligen h2 Elemente.


----------



## redhat99 (26. Oktober 2011)

ich habe es getestet und es weird leider nichtmal das element iframe erkannt. ich hatte addClass vor insertAfter hinzugefügt, da tut sich nichts..


ich hatte auch schon folgenden ansatz 





> $('#main').find('iframe').each(function(){
> $(this)
> 
> .addClass('zero')
> ...



hier wird das element iframe gefunden, aber keine ahnung, wie ich dann das vorgehene h2 element anspreche innerhalb des .layout_teaser.

Bei insertAfter('h2'). werden alle iframes hinter allen h2´s angezeigt...


----------



## redhat99 (26. Oktober 2011)

es müsste irgenwie so sein.. insertAfter .parent h2.. aber wie schreib Ich das.?!


----------



## CPoly (26. Oktober 2011)

In meinem Code ist es ja ein leichtes noch addClass hinzuzufügen.


```
$('.layout_latest').each(function() {
    var $this = $(this);
    
    $this.find('> .teaser > iframe').addClass('video').insertAfter( $this.find('> h2') );
});
```

Und das funktioniert bei mir korrekt. Hier mal mit zwei IFrames.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Move IFrame</title>
</head>

<body>
	<div class="layout_latest block first even">
		<h2 class="first">
			<a title="Den Artikel lesen: Regierungsjet A340 in Tokio-Haneda" href="aktuelles/regierungsjet-a340-in-tokio-haneda">Regierungsjet A340 in Tokio-Haneda</a>
		</h2>
	
		<div class="teaser">
			<span class="info"></span>
			<h3>hdeuhdu</h3>
			<iframe height="354" frameborder="0" width="637" src="http://www.youtube.com/embed/Oe2fZL5MNI4"></iframe>
			<p>Der A340 der Bundesregierung ist zurzeit in Tokio-Haneda abgestellt. Bundespräsident Christian Wulff reiste am 23. Oktober 2011 zu einem offiziellen Besuch nach Japan. Grund der Reise: Die Aufnahme diplomatischer Beziehungen zu Japan jährt sich zum 150. Mal. Am zweiten Tag seines Besuchs wurde der Bundespräsident von Kaiser Akihito im Kaiserlichen Palast in Tokio empfangen. Außerdem traf er Ministerpräsident Yoshihiko Noda, Umweltminister G?shi Hosono und Wirtschaftsvertreter zu Gesprächen. Die Reise soll bis zum 28. Oktober 2011 dauern.</p> 
		</div>
	</div>
	
	<div class="layout_latest block first even">
		<h2 class="first">
			<a title="Den Artikel lesen: Regierungsjet A340 in Tokio-Haneda" href="aktuelles/regierungsjet-a340-in-tokio-haneda">Regierungsjet A340 in Tokio-Haneda</a>
		</h2>
	
		<div class="teaser">
			<span class="info"></span>
			<h3>hdeuhdu</h3>
			<iframe height="354" frameborder="0" width="637" src="http://www.youtube.com/embed/Oe2fZL5MNI4"></iframe>
			<p>Der A340 der Bundesregierung ist zurzeit in Tokio-Haneda abgestellt. Bundespräsident Christian Wulff reiste am 23. Oktober 2011 zu einem offiziellen Besuch nach Japan. Grund der Reise: Die Aufnahme diplomatischer Beziehungen zu Japan jährt sich zum 150. Mal. Am zweiten Tag seines Besuchs wurde der Bundespräsident von Kaiser Akihito im Kaiserlichen Palast in Tokio empfangen. Außerdem traf er Ministerpräsident Yoshihiko Noda, Umweltminister G?shi Hosono und Wirtschaftsvertreter zu Gesprächen. Die Reise soll bis zum 28. Oktober 2011 dauern.</p> 
		</div>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
$('.layout_latest').each(function() {
	var $this = $(this);
	
	$this.find('> .teaser > iframe').addClass('video').insertAfter( $this.find('> h2') );
});
	});
	/* ]]> */
	</script>
</body>

</html>
```



redhat99 hat gesagt.:


> Bei insertAfter('h2'). werden alle iframes hinter allen h2´s angezeigt...



Steht auch so in der Doku



> Insert every element in the set of matched elements after the target.
> 
> [...]
> 
> the matched set of elements will be inserted after the element(s) specified by this parameter.


_http://api.jquery.com/insertAfter/_


----------



## redhat99 (26. Oktober 2011)

ich weiß schon, nur da tut sich bei mir überhaupt nichts. das iframe wird immer nur hinter dem vorhergehenden h2 anzeigt?

d.h. bei 3 videos und 3x h2, jeweils hinter jeder h2, das im layout_latest liegenden iframe(video)

ich glaub das liegt daran, da das iframe nochmals in einem p tag liegt, und wenn der kunde das falsch integriert auch in einer h1,h2,h3 etc.

ja, das wars.. da muss dann noch p > mit in den selector

hab nun folgenden code, der ****t  danke für deine hilfe..

```
<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
$('.layout_latest').each(function() {
	var $this = $(this);
	
	$this.find('> .teaser ').find('iframe').addClass('video').insertAfter( $this.find('> h2') );
});
	});
	/* ]]> */
	</script>
```


----------

