Question

我正在尝试使用jquery在页面中基于锚点生成子导航。出于某种原因，我无法将我的大脑包围起来。但基本上我有定期的锚点散落在我的身体里，如<a id="section"></a>和<a id="section2"></a>等......

所以我想让每个锚点$("a:not([href])")获取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 - ＆gt; http://jsfiddle.net/3Y7g3/18/

Answer 2

你可以这样做。只需循环锚点并构建导航标签。

var $nav = $("dl.sub-nav");

$("a:not([href])").each(function() {

    var id = $(this).prop("id");
    $a = $("a").prop("href", "#" + id).text(id);

    $nav.append(
        $("dd").append(
            $a
        )
    );
});

我假设你开始使用以下标记。否则你也可以生成它。

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

Answer 3

您希望首先过滤所有未分配ID的元素：

var anchors = $('a:not([href])').filter(function(){return this.id;});

您可以通过将id属性添加到jQuery选择器字符串来简化上述语句：

var anchors = $('a[id]:not([href])');

然后你需要做的就是遍历这个数组并相应地附加定义节点：

var $dl = $('dl.sub-nav');
anchors.each(function(){
  var $anchor = $("<a>"),
      id = this.id;
  $anchor.attr('href', "#" + id);

  // Capitalize the first letter of the anchor text as shown in your post
  $anchor.html(id.charAt(0).charAt(0).toUpperCase() + id.slice(1));

  $dl.append("<dd>" + $anchor.outerHTML() + "</dd>");
});

基于Anchor的jQuery生成列表

导航标记

3 个答案: