<!DOCTYPE html>
<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$menu = $('.block-content');
$menu.before('<ul class="map_left"></ul><ul class="map_center"></ul><ul class="map_right"></ul>');
/* .each(裡面記得要加上index)
children('li')只有指定下一層的ul,不會連下下層一起指定
*/
$menu.children('ul').children('li').each(function(index){
if( index <= '2'){
$(this).appendTo($('.map_left')); /*選擇你要移動的資料.appendTo(移動到哪裡去)*/
/*$('.map_left').append($(this)); 等同於下面寫法*/
}
else if( index == '3' )
$('.map_center').append($(this));
else if( index > '3')
$('.map_right').append($(this));
});
});
</script>
<style type="text/css">
.map_left{
float:left;
width:200px;;
background:red;
}
.map_center{
float:left;
width:200px;
background:pink;
}
.map_right{
float:left;
width:200px;
background:yellow;
}
</style>
</head>
<body>
<div class='block-content'>
<ul class='menu'>
<li class='first leaf menu-item-230'>Home</li>
<li class='expanded menu-item-533'>Solutions
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class='leaf menu-item-530'>Success Stories</li>
<li class='expanded menu-item-459'>Products</li>
<li class='leaf menu-item-463'>Partners</li>
<li class='last expanded menu-item-464'>Supports</li>
</ul>
</div>
</body>
</html>
留言列表
程式語言 (7)