Question

I have this HTML and i am trying to convert the href from photo.php to #photo etc for each

<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>

I have been trying something like this:

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

But the href always comes out undefined.

I am storing the hash in the li#id but if i could not do this it would be even better.

Thanks.

Answer 1

$(this) does not refer to the object you think it refers to.

With .attr you can use a function as a second argument to compute new attribute values for each matched element, like this:

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

In the above example, this refers to the correct context (the currently iterated anchor element).

You can try it here.