[英]jQuery clone method not working the way I want to
I'm trying to clone each div
tag to each li
tag that has a ul
tag in it: 我正在尝试将每个
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>
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. 例如,应该将类
drop-banner-1
的div
克隆到导航链接的“区域信息”中,因为它里面有一个ul
标记,并且它是第一个里面有ul
标记的。 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. 然后,应该将具有
drop-banner-2
类的div
克隆到导航链接Departments中,因为它内部有一个ul
标记,并且它是第二个。
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? 我究竟做错了什么?
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));
});
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. 遍历每个参数时,您可以访问内置的index参数,因此无需为此创建单独的变量。 Next, you want to select the list
#nav>li>ul
, not the list item #nav>li
, with the index from .each()
via eq(i)
. 接下来,您要选择列表
#nav>li>ul
,而不是列表项#nav>li
,并通过eq(i)
从.each()
进行索引。
$('#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 -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.