根據指數的JavaScript設置URL

請幫我優化這個腳本：根據指數的JavaScript設置URL

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

預先感謝您。

來源

2016-11-15 user3497585

在您的HTML中找不到'.cmsPanel'。 –

以這種方式，'div'不會像'a' –

你應該做的.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>

來源

2016-11-15 13:12:32

一樣感謝你，但是很抱歉，這不完全是我需要的東西，例如。cmsPanel ID始終是唯一的，並且沒有任何邏輯，唯一一致的是邏輯 – user3497585

@ user3497585您是否也可以向我顯示您的HTML代碼。會有幫助。也告訴我你想擺脫它。 –

@ user3497585我想你需要刷新頁面。一探究竟。我已經編輯了兩次。 –

使用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的正確子女，因爲您想獲得子女的身份證號碼而不是cmsPanel ID。
我加了nth-of-type，因爲顯然你可以在cmsPanel div中有另一個ulli列表元素。

來源

2016-11-15 13:15:34 Cladiuss

謝謝你...幾乎，但每個 – user3497585

返回#undefined url丟失'（）''（index + 1）' – cske

你可以編輯你的問題，添加一些HTML代碼？也許問題是html結構。 – Cladiuss

根據指數的JavaScript設置URL

回答

相關問題