jQuery clone method not working the way I want to

Question

I'm trying to clone each div tag to each li tag that has a ul tag in it:

<div id="drop-banner-wrap">
    <div class="drop-banner drop-banner-1" style="background:url('_assets_/images/drop-1.jpg') center center no-repeat;background-size;cover">first</div>
    <div class="drop-banner drop-banner-2" style="background:url('_assets_/images/drop-2.jpg') center center no-repeat;background-size;cover">second</div>
    <div class="drop-banner drop-banner-3" style="background:url('_assets_/images/drop-3.jpg') center center no-repeat;background-size;cover">third</div>
    <div class="drop-banner drop-banner-4" style="background:url('_assets_/images/drop-4.jpg') center center no-repeat;background-size;cover">fourth</div>
    <div class="drop-banner drop-banner-5" style="background:url('_assets_/images/drop-5.jpg') center center no-repeat;background-size;cover">fifth</div>
    <div class="drop-banner drop-banner-6" style="background:url('_assets_/images/drop-6.jpg') center center no-repeat;background-size;cover">sixth</div>
    <div class="drop-banner drop-banner-7" style="background:url('_assets_/images/drop-7.jpg') center center no-repeat;background-size;cover">seventh</div>
    <div class="drop-banner drop-banner-8" style="background:url('_assets_/images/drop-8.jpg') center center no-repeat;background-size;cover">eighth</div>
</div>

Here's the navigation structure:

<div id="nav-wrap">
    <ul id="nav" class="clearfix">
        <li><a href="./">Home</a></li>
        <li><a href="./">District Info</a>
            <ul>
                <li><a href="./">Dropdown link here</a></li>
                <li><a href="./">Dropdown link here</a></li>
                <li><a href="./">Dropdown link here</a></li>
            </ul>
        </li>
        <li><a href="./">Board of Education</a> </li>
        <li><a href="./">Departments</a>
            <ul>
                <li><a href="./">Dropdown link here</a></li>
                <li><a href="./">Dropdown link here</a></li>
                <li><a href="./">Dropdown link here</a></li>
            </ul>
        </li>
        <li><a href="./">Schools</a></li>
        <li><a href="./">Community</a></li>
        <li><a href="./">Staff</a></li>
        <li><a href="./">Quick Links</a></li>
    </ul><!-- /#nav -->
</div><!-- /#nav-wrap -->

For example, the div with the class drop-banner-1 should be cloned inside the navigation link District Info because it has a ul tag inside of it and it's the first one that has a ul tag inside. Then, the div with the class drop-banner-2 should be cloned inside the navigation link Departments because it has a ul tag inside of it and it's the second.

Here's my code:

$('#drop-banner-wrap div').each(function(){
    var whichDiv = $(this).index();
    var whichNav = $('#nav>li').eq(whichDiv);
    $(this).eq(whichNav).clone(true,true).prependTo('#nav li').find('ul');
});

What am I doing wrong?

Answer 1

If I understand you correctly you want this:

$('#drop-banner-wrap div').each(function(i) {
  $(this).clone(true, true).insertBefore($('#nav>li>ul').prev().eq(i));
});

jsFiddle example

When you traverse with each you have access to a built-in index argument so you don't need to create a separate variable for that. Next, you want to select the list #nav>li>ul , not the list item #nav>li , with the index from .each() via eq(i) .

Answer 2

 $('#drop-banner-wrap div').each(function(){ var whichDiv = $(this).index(); var whichNav = $('#nav>li>ul').eq(whichDiv); $cloneddiv=$(this).clone(true,true); $cloneddiv.prependTo($(whichNav)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="drop-banner-wrap"> <div class="drop-banner drop-banner-1" style="background:url('_assets_/images/drop-1.jpg') center center no-repeat;background-size;cover">first</div> <div class="drop-banner drop-banner-2" style="background:url('_assets_/images/drop-2.jpg') center center no-repeat;background-size;cover">second</div> <div class="drop-banner drop-banner-3" style="background:url('_assets_/images/drop-3.jpg') center center no-repeat;background-size;cover">third</div> <div class="drop-banner drop-banner-4" style="background:url('_assets_/images/drop-4.jpg') center center no-repeat;background-size;cover">fourth</div> <div class="drop-banner drop-banner-5" style="background:url('_assets_/images/drop-5.jpg') center center no-repeat;background-size;cover">fifth</div> <div class="drop-banner drop-banner-6" style="background:url('_assets_/images/drop-6.jpg') center center no-repeat;background-size;cover">sixth</div> <div class="drop-banner drop-banner-7" style="background:url('_assets_/images/drop-7.jpg') center center no-repeat;background-size;cover">seventh</div> <div class="drop-banner drop-banner-8" style="background:url('_assets_/images/drop-8.jpg') center center no-repeat;background-size;cover">eighth</div> </div> <div id="nav-wrap"> <ul id="nav" class="clearfix"> <li><a href="./">Home</a></li> <li><a href="./">District Info</a> <ul> <li><a href="./">Dropdown link here</a></li> <li><a href="./">Dropdown link here</a></li> <li><a href="./">Dropdown link here</a></li> </ul> </li> <li><a href="./">Board of Education</a> </li> <li><a href="./">Departments</a> <ul> <li><a href="./">Dropdown link here</a></li> <li><a href="./">Dropdown link here</a></li> <li><a href="./">Dropdown link here</a></li> </ul> </li> <li><a href="./">Schools</a></li> <li><a href="./">Community</a></li> <li><a href="./">Staff</a></li> <li><a href="./">Quick Links</a></li> </ul><!-- /#nav --> </div><!-- /#nav-wrap -->