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

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

Answer 2

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

缺少什么？

您忘记在id="dynamic-menu"元素上设置ul。
cmsPanel已在JavaScript中更改为cmsTabBox以匹配HTML。
我添加了div:nth-of-type以获得cmsPanel的合适子项，因为您希望获得子ID而不是cmsPanel ID。
我添加了nth-of-type，因为显然您可以在ul div中添加另一个li cmsPanel列表元素。

JavaScript根据索引设置URL

2 个答案: