JavaScript 根据索引设置 URL

JavaScript Set URL according to index

本文关键字：设置 URL 索引 JavaScript      更新时间：2023-09-26

请帮我优化这个脚本：

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

网页输入：

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

提前谢谢你。

你应该

这样做.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>

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

缺少什么？

  • 您忘记在ul元素上设置id="dynamic-menu"。
  • cmsPanel在 JavaScript 中更改为 cmsTabBox 以匹配 HTML。
  • 我添加了div:nth-of-type以获得cmsPanel的正确孩子，因为您想获得儿童 ID 而不是cmsPanel ID。
  • 我添加了nth-of-type因为显然您可以在cmsPaneldiv 中拥有另一个ul li列表元素。
相关文章：