在 .each 循环的 div 元素中追加数据答案

【问题标题】：Append data in a div element from .each loop在 .each 循环的 div 元素中追加数据
【发布时间】：2015-01-11 09:55:22
【问题描述】：

我有一个 html 菜单，我想获取一些信息并对其进行操作以便在其他地方使用。

但在每个循环中，我无法将数据推送到我各自的元素。

Example Fiddle

 $(document).ready(function () {
         // create a element container
            navDiv = $("#menu");


            $( "#mainnav .leval1" ).each(function() {
                var parent = $(this).children('a').html();
                var child = $(this).next('.navbox').html();
                var menuBlock = "<li><span> " +parent + "</span> " + child + "</li>";

               navDiv += menuBlock;
                console.log(menuBlock);
            });

HTML

<p id="print"></p>

<div id="menu"></div>

       <div id="mainnav">
    <div class="leval1"><a href="">lorem2</a></div>
    <div class="navbox">
        <ul>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
        </ul>
    </div>
    <div class="leval1"><a href="">lorem2</a></div>
    <div class="navbox">
        <ul>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
        </ul>
    </div>
    <div class="leval1"><a href="">lorem2</a></div>
    <div class="navbox">
        <ul>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
        </ul>
    </div>
    <div class="leval1"><a href="">lorem2</a></div>
    <div class="navbox">
        <ul>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
        </ul>
    </div>
    <div class="leval1"><a href="">lorem2</a></div>
    <div class="navbox">
        <ul>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
            <li><a href="">lorem2</a></li>
        </ul>
    </div>
</div>

【问题讨论】：

您在leval1 和$( "#mainnav .level1" ) 中存在拼写问题，因此您的选择器没有返回任何内容
很抱歉，这只是为了以防万一我的原始数据值的演示在控制台中打印
你错过了一个结束 }); 对。
@PeterKA 因为 OP 说他/她正在让控制台记录它可能是复制/粘贴错误

标签： javascript jquery html foreach each

【解决方案1】：

你需要使用 .append() nto 字符串拼接+

$(document).ready(function() {
  var navDiv = $("#menu");

  $("#mainnav .leval1").each(function(i) {
    if (i % 4 == 0) {
      //fourth iterration do something
    }
    var parent = $(this).children('a').html();
    var child = $(this).next('.navbox').html();
    var menuBlock = "<li><span>p: " + parent + "</span> " + child + "</li>";
    $('#print').html(menuBlock);

    //also the + operator won't work with jQuery object you need to append them
    navDiv.append(menuBlock);
    console.log(menuBlock);
  });
  //navDiv.mmenu();
});

#print {
  border: 1px solid red;
}
#menu {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="print"></p>

<!--Since you are appending `li` elemetns, menu should be a ul-->
<ul id="menu"></ul>

<div id="mainnav">
  <div class="leval1"><a href="">lorem2</a>
  </div>
  <div class="navbox">
    <ul>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
    </ul>
  </div>
  <div class="leval1"><a href="">lorem2</a>
  </div>
  <div class="navbox">
    <ul>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
    </ul>
  </div>
  <div class="leval1"><a href="">lorem2</a>
  </div>
  <div class="navbox">
    <ul>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
    </ul>
  </div>
  <div class="leval1"><a href="">lorem2</a>
  </div>
  <div class="navbox">
    <ul>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
    </ul>
  </div>
  <div class="leval1"><a href="">lorem2</a>
  </div>
  <div class="navbox">
    <ul>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
      <li><a href="">lorem2</a>
      </li>
    </ul>
  </div>
</div>

【讨论】：

@SahilPopli 我已经在我进行更正的区域添加了 cmets
还有一个问题，我要在此之后初始化 mmenuu，如何在绑定 this 后触发 mmenu 事件。 '$('nav#menu').mmenu();'
@SahilPopli 抱歉，您只在第一个循环中说是什么意思
它在每个循环第一次旋转后创建菜单，其他数据刚刚插入。但现在它适用于窗口加载
你是把代码放在每个hadnler里面还是外面