从.each循环中将数据追加到div元素中

Question

I am having a html menu and i want to fetch some information and manipulate it for using somewhere else.

but in each loop i am unable to push data to my respective element.

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>

Answer 1

You need to use .append() nto string concatenation +

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