jquery insert new open close div

Question

I have some menu loop coding, how to insert some div before start loop, and after end loop. I was try with .prepend but not working.

<li class="mega-menu-fullwidth dropdown"><a href='#'>Features</a>
    <ul class="dropdown-menu">
<!-- div open goes here <li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"> -->
            <!-- Start First Loop -->
            <a href='javascript:void(0);'>submega</a>
            <div class="col-md-3 equal-height-in">
            <ul class="list-unstyled equal-height-list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
            </div><!-- End First Loop -->
<!-- div close goes here </div></div></div></li> -->
    </ul>
</li>

Any can help me? Thanks

$(function(){ $('.mega-menu-fullwidth .dropdown-menu').prepend('<li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"></div></div></div></li>'); });

not working.

show the javascript which you use to loop (and add elements to DOM) — mehulmpt, Apr 09 '17 at 17:53
this is wordpress loop, i need jquery for open div and close before and after loop — Krisna Wan, Apr 09 '17 at 17:57
Right, we need you to post the current javascript that you wrote that is not working so we can help you fix it. — Loren, Apr 09 '17 at 17:58

Alok · Accepted Answer · 2017-04-09T19:04:24.760

Hope it helps.

<li class="mega-menu-fullwidth dropdown"><a href='#'>Features</a>
    <ul class="dropdown-menu">
<!-- div open goes here <li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"> -->
            <!-- Start First Loop -->
            <a href='javascript:void(0);'>submega</a>
            <div class="col-md-3 equal-height-in">
            <ul class="list-unstyled equal-height-list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
            </div><!-- End First Loop -->
<!-- div close goes here </div></div></div></li> -->
    </ul>
</li>

var appendedHtml = '<li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif">'+$('ul.dropdown-menu').html()+'</div></div></div></li>';
$('ul.dropdown-menu').html(appendedHtml);

$('ul.equal-height-list').eq(0).find('li').eq(0).remove();
$('ul.equal-height-list').eq(0).prepend('<h3>One</h3>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="mega-menu-fullwidth dropdown"><a href='#'>Features</a>
    <ul class="dropdown-menu">
<!-- div open goes here <li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"> -->
            <!-- Start First Loop -->
            <a href='javascript:void(0);'>submega</a>
            <div class="col-md-3 equal-height-in">
            <ul class="list-unstyled equal-height-list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
            </div><!-- End First Loop -->
<!-- div close goes here </div></div></div></li> -->
    </ul>
</li>

Edited my answer. If its help upvote the answer. $('ul.equal-height-list').find('li').eq(0).remove(); $('ul.equal-height-list').prepend('
One
'); — Alok, Apr 09 '17 at 18:40
Its working. but the coding replace all first loop li, how about remove first ahref and atribut on ul.equal-height-list, then replace first

jquery insert new open close div

1 Answers1

One

One

and

One