将数据附加到.each循环的div元素中

时间:2014-11-14 04:01:20

标签: javascript jquery html foreach each

我有一个html菜单,我想获取一些信息并操纵它以便在其他地方使用。

但在每个循环中,我无法将数据推送到我的相应元素。

Example Fiddle

JS

 $(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>

1 个答案:

答案 0 :(得分:1)

您需要使用.append()n到字符串连接+

$(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>