Question

有没有办法让javascript在页面上创建所有内部href =＃的数组？

这个想法是有一个下拉菜单，其中包含指向页面上所有锚点的链接。

Answer 1

根据您需要的浏览器支持，您可以执行以下操作：

var elems = document.getElementsByTagName( 'a' );

var hashes = Array.prototype.map.call( elems, function( v, i ) {
    return v.hash;
}).filter( function( v, i, a ) { return !!v && a.indexOf( v ) === i; });

您可以使用MDN提供的填充程序获得对旧浏览器的支持。

在评论中，您注意到您需要name而不是href。

您可以执行此操作，它会自动为您带来更多浏览器支持，但您仍然希望获得对indexOf()的支持。

var elems = document.getElementsByTagName( 'a' );

var names = [];

for( var i = 0, len = elems.length; i < len; i++ ) {
    if( elems[i].name && names.indexOf( elems[i].name ) === -1 ) {
        names.push( elems[i].name ); 
    }
}

Answer 2

您不想要锚点列表而不是锚点链接列表吗？使用a[name],a[id]:not([href])选择器查找具有名称或id但没有href的所有锚元素。

$('a[name],a[id]:not([href])').each(function(i,e){
  var name = $(e).attr('name') | $(e).attr('id');
  $('<option/>', { value: '#'+name, text: e.text() }).appendTo('#TheSelect');
});

Answer 3

这是一个非常简单的函数，可以返回你想要的数组。不需要jQuery。

function linksArray(){
    var links = document.getElementsByTagName("a"), linklist = [];
    for(var i=0, len=links.length; i<len; ++i){
        linklist.push(links[i].attributes.getNamedItem("href").value);
    }
    return linklist;
}

Answer 4

jQuery让这很简单：

$("a").filter( function() {
    return $(this).attr("href")[0] == "#";
} ).each( function() {
    $("select").append("<option>" + $(this).attr("href") + "</option>");
} );

只是将“href”字段的文本作为“option”标志的文本添加到页面上的每个“select”字段。显然你需要根据自己的需要定制它，但这应该让你开始。

让javascript列出页面上所有内部href =＃的列表

4 个答案: