DOM Reihenfolge von Elementen ändern..

R

redhat99

Grünschnabel
Hallo,

ich habe folgenden Code

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
Code: 
$('.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!?
 
Meinst du so was?

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

Ich bin nicht sicher, ob ich dich verstanden habe.
 
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')
.parent().parent().children('h2').addClass('dede');
//.find('h2')
Zum Vergrößern anklicken....

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...
 
In meinem Code ist es ja ein leichtes noch addClass hinzuzufügen.

Javascript: 
$('.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.

HTML: 
<!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...
Zum Vergrößern anklicken....

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.
Zum Vergrößern anklicken....
http://api.jquery.com/insertAfter/
 
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..
Javascript: 
<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>
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück