<!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>

cabuchi 發表在 痞客邦 PIXNET 留言(0) 人氣()