Question

我需要一些帮助才能使用jQuery自动构建菜单。

我有以下HTML结构

<table width="99%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td height="20"><a href="#descripcion">Descripción</a></td>
        </tr>
        <tr>
            <td height="20"><a href="#preguntas">Preguntas Frecuentes</a></td>
        </tr>
        <tr>
            <td height="20"><a href="#incompatibilidades">Incompatibilidades</a></td>
        </tr>
    </tbody>
</table>

...

<a name="descripcion"></a>
<h1>Descripcion</h1>

...

<a name="preguntas"></a>
<h1>Preguntas</h1>

在这种情况下，锚＆＃34; incompatibilidades＆＃34;不存在，所以我需要的是创建一个jQuery脚本，寻找任何＆＃34; a＆＃34;标签有相应的链接。

我期望的结果如下：

<table width="99%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td height="20"><a href="#descripcion">Descripción</a></td>
        </tr>
        <tr>
            <td height="20"><a href="#preguntas">Preguntas Frecuentes</a></td>
        </tr>
    </tbody>
</table>

我感谢你的帮助！

Answer 1

没有测试，如果我的问题是正确的 - 你正在寻找这样的东西：

$().ready(function() {
    // scan all links in your menu
    $('table').find('a').each(function() {
        // grep href attribute
        var target = $(this).attr('href');
        // element does not exist?
        if(! $(target).length) {
            // remove parent row
            $(this).closest('tr').remove();
        }
    });
});

并且 - 正如@David Thomas正确提到的那样，你不应该使用命名锚，而是使用id - 如果你这样做，你可以直接使用锚（＆＃39;＃xyz＆＃39;）我在上面的函数中做了id选择器。

Answer 2

如果您想删除包含所提到的不存在的锚标记的表格行，您可以使用：

$(document).ready(function() {
   $('a[href="#incompatibilidades"]').closest('tr').remove(); // Or detach, possibly
});

如果您想在h1 + a中添加并将其附加到您的DOM，则可以使用：

$(document).ready(function() {
    var anchor = $('<a></a>', { 'name' : 'incompatibilidades' });
    var h1 = $('<h1></h1>', { text: 'incompatibilidades' });

    // Append these to the DOM here. 
});

Answer 3

首先，您不应该使用命名锚点，而是使用id（name元素上的“ a属性已过时¹ “），给予：

<h1 id="descripcion">Descripcion</h1>
...
<h1 id="preguntas">Preguntas</h1>

此外，使用<table>元素来呈现列表有点非语义，因为它是非表格信息;而是使用有序列表<ol>。因此，考虑到这一点，我建议使用以下jQuery：

$('h1[id]').each(function() {
  var target = this.id;
  $('#toc').append(function() {
    return '<li><a href="#' + target + '">' + target + '</a></li>';
  });
});

#toc {
  text-transform: capitalize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="toc"></ol>

<h1 id="descripcion">Descripcion</h1>
...
<h1 id="preguntas">Preguntas</h1>

这种方法基于一种假设，即您希望构建一个目录链接到页面上的那些元素。

注意：

http://www.w3.org/TR/html-markup/a.html#a-constraints。

Answer 4

如果我理解正确，你可以这样做：

    var menu = $("#menu");
    $("a").each(function() {
        var $this = $(this);
        var name = $this.attr("name");
        if (typeof(name) !== 'undefined') {
            var links = $("a[href='#"+name+"']");
            var link;
            if (links) {
               link = links.eq(0);
            }
            if (link && typeof(link) !== 'undefined') {
                menu.append("<tr><td><a href='#"+name+"'>"+link.text()+"</a></td></tr>");
            }
        }
    });

您必须在新表中添加“menu”id以创建您期望的内容。

使用jQuery自动构建锚点菜单

4 个答案: