JavaScript根据索引设置URL
JavaScript根据索引设置URL
提问于 2016-11-15 21:10:35
请帮我优化一下这个脚本：
$('#dynamic-menu li:nth-child(1) a').attr('href','#' + $('.cmsPanel:nth-child(2)').attr('id'));
$('#dynamic-menu li:nth-child(2) a').attr('href','#' + $('.cmsPanel:nth-child(3)').attr('id'));
$('#dynamic-menu li:nth-child(3) a').attr('href','#' + $('.cmsPanel:nth-child(4)').attr('id'));
$('#dynamic-menu li:nth-child(4) a').attr('href','#' + $('.cmsPanel:nth-child(5)').attr('id'));
$('#dynamic-menu li:nth-child(5) a').attr('href','#' + $('.cmsPanel:nth-child(6)').attr('id'));
$('#dynamic-menu li:nth-child(6) a').attr('href','#' + $('.cmsPanel:nth-child(7)').attr('id'));HTML输入：
<ul>
<li><a href="/randomUrl"></a></li>
<li><a href="/yyy"></a></li>
<li><a href="/zzz"></a></li>
</ul>
<div class="cmsTabBox">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="cmsPanel" id="randomUrl"></div>
<div class="cmsPanel" id="another-random-url"></div>
<div class="cmsPanel" id="random"></div>
</div>上面的方法可以工作，但我如何自动复制id，减少索引，并将其复制到href属性？
需要HTML输出：
<ul>
<li><a href="#randomUrl"></a></li>
<li><a href="#another-random-url"></a></li>
<li><a href="#random"></a></li>
</ul>
<div class="cmsTabBox">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="cmsPanel" id="randomUrl"></div>
<div class="cmsPanel" id="another-random-url"></div>
<div class="cmsPanel" id="random"></div>
</div>提前谢谢你。
回答 2
Stack Overflow用户
发布于 2016-11-15 21:12:32
你应该用.each()的方式：
$('#dynamic-menu li').each(function (i) {
$(this).find("a").attr('href','#' + $('.cmsPanel:nth-child(' + (i+1) + ')').attr('id'));
});代码片段
$(function () {
$('#dynamic-menu li').each(function (i) {
$(this).find("a").attr('href','#' + i);
});
});<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<ul id="dynamic-menu">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
Stack Overflow用户
发布于 2016-11-15 21:15:34
使用each：
编辑之前的
$('#dynamic-menu li').each(function (index) {
$(this).find("a").attr('href','#' + $('.cmsPanel:nth-child('+ (index+1) +')').attr('id'));
});编辑后的
$('#dynamic-menu li').each(function (index) {
$(this).find("a").attr('href','#' + $('.cmsTabBox div:nth-of-type('+ (index+1) +')').attr('id'));
});这样，您就可以保留您的链接逻辑，而不需要为每个链接重复它，也不需要使用增量循环(for)。
下一步代码是如何修复html结构/JavaScript中的一些错误：
$(function () {
$('#dynamic-menu li').each(function (index) {
$(this).find("a").attr('href','#' + $('.cmsTabBox div:nth-of-type('+ (index+1) +')').attr('id'));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="dynamic-menu">
<li><a href="/xxx">randomUrl</a></li>
<li><a href="/yyy">another-random-url</a></li>
<li><a href="/zzz">random</a></li>
</ul>
<div class="cmsTabBox">
<ul></ul>
<div id="randomUrl"></div>
<div id="another-random-url"></div>
<div id="random"></div>
</div>
遗漏了什么？
- 您忘了在JavaScript中设置
id="dynamic-menu"
已在ul中更改为cmsTabBox以匹配HTML.
- 我添加了
div:nth-of-type以获取cmsPanel的正确子项，因为您希望获取子项id，而不是D22id。<代码>H223<代码>H124我添加了D25，因为显然您可以在D28div中添加另一个列表元素D26D27
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40610676
复制相关文章
相似问题
腾讯云开发者
