Question

更复杂...... 我有这个HTML：

<div class="full">
   <div class="col">
     <ul>
      <li>Big Menu1   
       <ul>
         <li>menu1</li>
         <li>menu2</li>
         <li>menu3</li>
       </ul>
       </li>
       <li>Big Menu 2
         <ul>
            <li>menu1</li>  
            <li>menu2</li>
         </ul>
       </li>
       <li>Big Menu 3
        <ul>
         <li>menu1</li>
         <li>menu2</li>
         <li>menu3</li>                       
       </ul>        
     </li> 
     <li>Big Menu 4</li>
     <li>Big Menu 5
        <ul>
         <li>menu1</li>
         <li>menu2</li>
         <li>menu3</li>                       
       </ul>        
     </li> 
     <li>Big Menu 6
       <ul>
         <li>menu1</li>
         <li>menu2</li>
       </ul>
     </li>   
    </ul>
  </div>
</div>

我想改变它有3个主“col”div，每个ul里面都会增加。这是我想要的代码：

<div class="full">
   <div class="col">
     <ul>
      <li>Big Menu1   
       <ul>
         <li>menu1</li>
         <li>menu2</li>
         <li>menu3</li>
       </ul>
       </li>
       <li>Big Menu 4</li>
     </ul>
   </div>
   <div class="col">
      <ul>
       <li>Big Menu 2
         <ul>
            <li>menu1</li>  
            <li>menu2</li>
         </ul>
       </li>
       <li>Big Menu 5
          <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>                       
         </ul>        
       </li> 
     </ul>
   </div>
   <div class="col">
     <ul>
       <li>Big Menu 3
        <ul>
         <li>menu1</li>
         <li>menu2</li>
         <li>menu3</li>                       
       </ul>        
     </li> 
     <li>Big Menu 6
       <ul>
         <li>menu1</li>
         <li>menu2</li>
       </ul>
     </li>   
    </ul>
  </div>                         
  </div>

使用jQuery可能还是太复杂？我希望这是足够的理解。

Answer 1

我想你想做的是这样的事情：

$m2 = $("li:contains('Big Menu 2')")
$m3 = $("li:contains('Big Menu 3')")
$m4 = $("li:contains('Big Menu 4')")
$m5 = $("li:contains('Big Menu 5')")
$m6 = $("li:contains('Big Menu 6')")
$(".full").append("<div class='col'><ul></ul></div>");
$("ul:last").append($m2).append($m5);
$(".full").append("<div class='col'><ul></ul></div>");
$("ul:last").append($m3).append($m6);

小提琴：http://jsfiddle.net/amdro3f8/1/

希望这有帮助。

Answer 2

感谢您的回答。

它帮助我创建了另一个jQuery代码，根据＆＃34; Big Menu＆＃34;的数量，它可以是动态的。（1,2,6等）：所有带有Big Menu的li都有一个类名：lvl2

var proc1="";
var proc2="";   

$("li.lvl2").each(function()
{                   
    var liIndex = $(this).index();

    switch (liIndex)
    {           
        default:
            if (liIndex% 2 === 0 )
            {
                proc1=proc1+".append($('li.lvl2').eq("+liIndex+"))";                
            }
            else
            {
                proc2=proc2+".append($('li.lvl2').eq("+liIndex+"))";    
            }
        break;  
    }

});

$(".full").append("<div class='col'><ul></ul></div>");  
eval("$('ul:last')"+proc2);
$(".full").append("<div class='col'><ul></ul></div>");
eval("$('ul:last')"+proc1);

但我不能拥有你得到的东西，我想我错过了一件小事，因为订单不一样。我无法找到..： - / 即使我使用默认值进行切换。

Jquery关闭div和ul标签并重新打开新的第二部分

2 个答案: