javascript - jQuery 基于 anchor 生成列表

Question

我正在尝试使用 jquery 生成基于页面中 anchor 的子导航。出于某种原因，我无法全神贯注地思考它是如何工作的。但基本上我的 body 里散布着常规 anchor ，如 <a id="section"></a>和 <a id="section2"></a>等等……

所以我想把每个 anchor $("a:not([href])")获取 ID 并将每个 ID 附加到定义列表 <dd><a href="#section">Section</a></dd> .

导航标记

<dl class="sub-nav">
<dt>Filter:</dt>
<dd class="active"><a href="#">Top</a></dd>
<dd><a href="#section">Section</a></dd>
<dd><a href="#section2">Section2</a></dd>
<dd><a href="#section3">Section3</a></dd>
</dl>

Answer 1

试试这个:

HTML:

<a id="section"></a>
<a id="section2"></a>
<a id="section3"></a>
<a id="section4"></a>

<dl class="sub-nav"> 
    <dt>Filter:</dt> 
    <dd class="active"><a href="#">Top</a></dd> 
</dl>

jQuery:

$("a:not([href])").each(function(){
    $('dl.sub-nav').append("<dd><a href='#" + $(this).attr('id') + "'>" + $(this).attr('id') + "</a></dd>");
});

jsfiddle -> http://jsfiddle.net/3Y7g3/18/