Question

我想在浏览器中添加带有URL的每个菜单项（由于某些url重定向内容而必须这样做）。但它在下面的线条中给出了错误。我究竟做错了什么？什么是正确的方法？

          $(window).load(function () {
            var Home = window.location.pathname;
            alert(Home);
            path = $("#menu ul li a");

            $.each(path, function (key, value) {
                console.log(value);
                alert(value);

            //These line give error: 
            //Object [object HTMLAnchorElement] has no method 'attr'

                var link =  value.attr("href");
                value.attr("href", Home + link );
            });


        });

HTML

 <div class="menu" id="menu">
    <ul>
        <li><a href="Index.html">Home</a></li><div class="menuline"></div>
        <li><a href="Products.html">Products</a></li><div class="menuline"></div>
        <li><a href="Albums">Photos</a></li><div class="menuline"></div>
        <li><a href="#">Contact</a></li><div class="menuline"></div>
    </ul>

Answer 1

您需要jQuery个对象而不是Dom来调用attr()，因为each()为您提供DOM对象而不是jQuery对象

$(value).attr("href", Home + link );

您还可以使用DOM对象直接将值赋给href

value.href = Home + link;

.each（）直接用于jQuery集合。它迭代了集合中的每个匹配元素，并对其执行回调宾语。集合中当前元素的索引是作为参数传递给回调。值（DOM中的DOM元素）这个例子也是传递的，但回调是在内部触发的当前匹配元素的上下文，因此this关键字指向在其他jQuery回调中预期的当前元素jQuery docs。

Answer 2

使用.attr( attributeName, function(index, attr) )

$(window).load(function () {
    var Home = window.location.pathname;
    var path = $("#menu ul li a");

    path.attr('href', function (i, href) {
        console.log(this, href);
        return Home + href
    })
});

演示：Fiddle

问题的原因是value是一个dom元素引用，没有.attr()方法，它由jQuery对象提供。所以你需要为value

使用jQuery包装器

Answer 3

TL; DR - 您可以完全删除该代码。

jQuery对象中的每个元素实际上都是一个DOM元素，因此当您使用$.each()遍历它时，您将使用实际的DOM元素而不是jQuery的良好包装优点。您可以使用$.each()代替$.fn.each()：

$("#menu ul li a").each(function() {
    // this references the DOM element and we change its 'href' attribute.
    this.setAttribute('href', Home + this.getAttribute('href');
});

也就是说，当您有<a href="bla.html">...</a>时，href属性内部已经以window.location.pathname开头，因为您的链接是相对于当前文档的。

更新

你也可以使用.attr(name, fn)方法：

$('menu ul li a').attr('href', function(_, value) {
    return Home + value;
});

对象HTMLAnchorElement]没有方法'attr'

3 个答案:

更新