jQuery克隆方法無法按我想要的方式工作

Question

我正在嘗試將每個div標簽克隆到其中具有ul標簽的每個li標簽：

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

例如，應該將類drop-banner-1的div克隆到導航鏈接的“區域信息”中，因為它里面有一個ul標記，並且它是第一個里面有ul標記的。 然后，應該將具有drop-banner-2類的div克隆到導航鏈接Departments中，因為它內部有一個ul標記，並且它是第二個。

這是我的代碼：

$('#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');
});

我究竟做錯了什么？

Answer 1

如果我對您的理解正確，那么您需要這樣做：

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

jsFiddle示例

遍歷每個參數時，您可以訪問內置的index參數，因此無需為此創建單獨的變量。 接下來，您要選擇列表#nav>li>ul ，而不是列表項#nav>li ，並通過eq(i)從.each()進行索引。

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