从父母属性设置属性

Question

我有这个 HTML，我正在尝试将 href 从 photo.php 转换为 #photo 等，对于每个

<ul id="menu">
    <li id="home" class="tab_selected"><a href="home.php">Home</a></li>
    <li id="portfolio"><a href="portfolio.php">Portfolio</a></li>
    <li id="music"><a href="music.php">Music</a></li>
    <li id="video"><a href="video.php">Video</a></li>
    <li id="photo"><a href="photo.php">Photo</a></li>
</ul>

我一直在尝试这样的事情：

$('#menu li a').attr('href', "#"+$(this).parent().attr('id'));

但 href 总是显示为未定义。

我将哈希值存储在 li#id 中，但如果我不能这样做，那就更好了。

谢谢。

Answer 1

$(this) 并不引用您认为它引用的对象。

通过 .attr，您可以使用函数作为第二个参数来计算每个匹配元素的新属性值，如下所示：

// i == index, val == value of href at index i
$('#menu li a').attr('href', function(i, val) {
    return '#' + $(this).parent().attr('id');
});

在上面的示例中，this 引用正确的上下文（当前迭代的锚元素）。

您可以在这里尝试。

Answer 2

全部 jQuery

$('#menu li a').each(function () {
    var a = $(this);
    a.attr('href', "#" + a.parent().attr('id');
});

部分 jQuery

$('#menu li a').each(function () {
    this.href = "#" + $(this).parent()[0].id;
});

少部分 jQuery

$('#menu li a').each(function () {
    this.href = "#" + this.parentNode.id;
});

任君选择:)

Answer 3

问题是 this 不包含错误的值（它指的是可能存在的任何包装上下文），因为您不在正确的上下文中。查看（当前）另外 3 个答案中的任何一个，了解如何解决此问题（提示，您想使用每个)

Answer 4

$('#menu li a').each(function(){
    var $this = $(this);
    $this.attr('href', "#"+$this.parent().attr('id'));
});