Question

我有这个HTML

<div class="full">
 <ul>
  <li>Big Menu1
   <div class="col"> 
    <ul>
     <li>menu1</li>
     <li>menu2</li>
     <li>menu3</li>
     <li>menu4</li>  
     <li>menu5</li>
     <li>menu6</li>
     <li>menu7</li>
     <li>menu8</li>                       
   </ul>        
 </li> 
 <li>Big Menu 2</li>   
</div>

我想创建一个新的html所有三个li，它创建一个带有“col”类的新div和一个新的ul标签，如下所示：

<div class="full">
  <ul>
    <li>Big Menu1
     <div class="col"> 
       <ul>
         <li>menu1</li>
         <li>menu2</li>
         <li>menu3</li>
       </ul>
     </div>
     <div class="col"> 
     <ul>
          <li>menu4</li>  
          <li>menu5</li>
          <li>menu6</li>
     </ul>            
    </div>
    <div class="col"> 
     <ul>
         <li>menu7</li>
         <li>menu8</li>                       
     </ul>
    </div>
   </li>
   <li>Big Menu2</li>
  </ul>
 </div>

如何使用jQuery来实现？我只是设法创建了ul，但是无法创建div。

Answer 1

你可以做点什么

var div = $('.full').append('<div class="col">content</div>');
var ul = $(div).append('<ul> </ul>');
$(ul).append('<li>menu#</li>);

这也允许您使菜单动态，因此可以在某处设置变量，如

 var menu = somecontenttoTriggermenu;
 $(ul).append('<li>' +menu+ '</li>');

或者在致命一击中做到这一切。没有动态的方法。这一切都取决于它的用途。

Answer 2

可以使用这样的东西：

$('.full .col').each(function() {
    var $col = $(this);
    var $li = $col.find('ul li:gt(2)');
    for (var i = 0; i < $li.length; i = i + 3) {
      var $newList = $('<ul>').append($li.slice(i, i + 3));
      var $newCol = $('<div>', {
        class: 'col'
      }).append($newList);
      $col.parent().append($newCol);
    }
});

$(function() {
  $('.full .col').each(function() {
    var $col = $(this);
    var $li = $col.find('ul li:gt(2)');
    for (var i = 0; i < $li.length; i = i + 3) {
      var $newList = $('<ul>').append($li.slice(i, i + 3));
      var $newCol = $('<div>', {
        class: 'col'
      }).append($newList);
      $col.parent().append($newCol);
    }
  });
});

.col {
  border: 1px solid green;
  padding: 10px;
}
.col ul {
  border: 1px solid red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="full">
  <ul>
    <li>Big Menu1
      <div class="col">
        <ul>
          <li>menu1</li>
          <li>menu2</li>
          <li>menu3</li>
          <li>menu4</li>
          <li>menu5</li>
          <li>menu6</li>
          <li>menu7</li>
          <li>menu8</li>
        </ul>
      </div>
    </li>
    <li>Big Menu 2</li>
  </ul>
</div>

Answer 3

这是一种JavaScript方法：

＆＃13;

var ul = document.createElement('ul');
var li = document.createElement('li');
li.appendChild(document.createTextNode('BigMenu1'))
ul.appendChild(li);
var c = 1;
for (i = 0; i < 3; i++) {
    var newDiv = document.createElement('div');
    newDiv.className = 'col';
    var newUl = document.createElement('ul');
    for (j = 0; j < 3; j++) {
        if (i == 2 && j == 2) {
            break;
        }
        newLi = document.createElement('li');
        newLi.appendChild(document.createTextNode('menu' + c++));
        newUl.appendChild(newLi);
    }
    newDiv.appendChild(newUl);
    li.appendChild(newDiv)
}
var lastLi = document.createElement('li');
lastLi.appendChild(document.createTextNode('BigMenu2'));
ul.appendChild(lastLi);
var full = document.createElement('div');
full.className = 'full';
full.appendChild(ul);
document.body.appendChild(full);

＆＃13;

.col {
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}

＆＃13;

Answer 4

你可以使用jquery append方法。$("#foo").append("<div id='myDiv'>Other element</div>")

Jquery关闭div和ul标签并重新打开新的

4 个答案: