Javascript-форум - Показать сообщение отдельно

ksa · #2 (**permalink**) 02.02.2015, 21:39

Сообщение от fermer

Есть

<div class="rg-image-wrapper">           
<div class="rg-image-nav">       
<a href="#" class="rg-image-nav-prev">Previous Image</a>      
 <a href="#" class="rg-image-nav-next">Next Image</a>      
</div>          
<div class="rg-image"><img src="images/1.jpg"></div>     
<div class="rg-loading" style="display: none;">
</div>     
</div>

Мне необходимо

<div class="rg-image-nav">       
<a href="#" class="rg-image-nav-prev">Previous Image</a>      
 <a href="#" class="rg-image-nav-next">Next Image</a>      
</div>

переместить так, чтобы получилось следующие

<div class="rg-image-wrapper">             
<div class="rg-image">
<div class="rg-image-nav">       
<a href="#" class="rg-image-nav-prev">Previous Image</a>      
 <a href="#" class="rg-image-nav-next">Next Image</a>      
</div>       
<img src="images/1.jpg"></div>     
<div class="rg-loading" style="display: none;">
</div>     
</div>

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 10px;
}
.rg-image {
	border: 1px solid;
}
.rg-image-nav {
	border: 1px solid red;
}
</style>
<script type='text/javascript'>
$(function (){
	$('button').click(function (){
		$('.rg-image').prepend($('.rg-image-nav'));
	});
});
</script>
</head>
<body>
<div class="rg-image-wrapper">           
	<div class="rg-image-nav">       
		<a href="#" class="rg-image-nav-prev">Previous Image</a>      
		<a href="#" class="rg-image-nav-next">Next Image</a>      
	</div>          
	<div class="rg-image">
		<img src="http://javascript.ru/forum/images/smilies/smile.gif">
	</div>     
	<div class="rg-loading" style="display: none;">
	</div>     
</div>
<button>Go</button>
</body>
</html>