Question

我有以下情况。我想用包装器div包装所有ul元素，并决定使用forEach（），但是某些功能无法正常使用。您能提供一些建议吗？这是我的代码。

<div class="mainMenu">
    <ul>
      <li>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </li>
      <li>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </li>
    </ul>
    
    
  </div>

  <script type="text/javascript">
    
    var menuLists = document.querySelectorAll('.mainMenu ul');
    
    var wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    

    menuLists.forEach(function(list){
      
      list.parentNode.insertBefore(wrapper, list);
      wrapper.appendChild(list);
      
    });

  </script>

Answer 1

您需要为要包装的每个元素构造一个新的包装器-否则会将它们全部放入单个包装器中，并且当嵌套列表时，由于DOM层次结构，它无法使用。

var menuLists = document.querySelectorAll('.mainMenu ul');
menuLists.forEach(function(list){
  var wrapper = document.createElement('div');
//^^^^^^^^^^^^^  
  wrapper.className = 'wrapper';
  list.parentNode.insertBefore(wrapper, list);
  wrapper.appendChild(list);
});

<div class="mainMenu">
    <ul>
      <li>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </li>
      <li>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </li>
    </ul>
  </div>

Answer 2

您需要在循环的每次迭代过程中实例化包装器，如下所示：

<div class="mainMenu">
    <ul>
      <li>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </li>
      <li>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </li>
    </ul>
    
    
  </div>

  <script type="text/javascript">
    
    var menuLists = document.querySelectorAll('.mainMenu ul');

    menuLists.forEach(function(list){
      var wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
      list.parentNode.insertBefore(wrapper, list);
      wrapper.appendChild(list);
      
    });

  </script>

forEach（）期间的JavaScript包装元素不起作用

2 个答案: