JavaScript 根据索引设置 URL

Question

请帮我优化这个脚本:

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

提前谢谢您。

Answer 1

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