Start New Discussion within our Web Development Community

Hi all,

I've been struggling with different ways to solve a problem for about a week, and as my attempts have so far been fruitless, I figured I would turn to DaniWeb for some help.

I have an unordered list <ul class="navigation"> where each list item contains some links.

Example:

<ul class="navigation">
<li><a href="index.php?view=cover">COVER</a></li>
<li><a href="index.php?view=contents">CONTENTS</a></li>
<li><a href="index.php?view=cogito-ergo-hack">AROUND TOWN</a>
<ul class="sub">
<li><a href="index.php?view=cogito-ergo-hack">Cogito Ergo Hack</a></li><br />
<li><a href="index.php?view=now-boarding">Now Boarding</a></li><br />
<li><a href="index.php?view=higher-calling">Higher Calling</a></li><br />
</ul>
</li>
etc...

Basically, I'm trying to find a javscript function that finds the string "index.php?view=" in those links and replaces it with a "#" (hash symbol) when the page loads/document is ready.

I did the Google searches and every method I've tried seems to fail at doing anything- The scripts that I've tried have mostly been modified from web tutorials and, like I said, they haven't worked in the slightest. But if it would be helpful, I can post some of what I've tried if anyone would like.


SUMMARY:
I'm trying to change this:

<ul class="navigation">
    <li><a href="index.php?view=cover">COVER</a></li>
    <li><a href="index.php?view=contents">CONTENTS</a></li>
    <li><a href="index.php?view=cogito-ergo-hack">AROUND TOWN</a>
        <ul class="sub">
            <li><a href="index.php?view=cogito-ergo-hack">Cogito Ergo Hack</a></li><br />
            <li><a href="index.php?view=now-boarding">Now Boarding</a></li><br />
            <li><a href="index.php?view=higher-calling">Higher Calling</a></li><br />
        </ul>
    </li>
etc...

to this:

<ul class="navigation">
    <li><a href="#cover">COVER</a></li>
    <li><a href="#contents">CONTENTS</a></li>
    <li><a href="#cogito-ergo-hack">AROUND TOWN</a>
        <ul class="sub">
            <li><a href="#cogito-ergo-hack">Cogito Ergo Hack</a></li><br />
            <li><a href="#now-boarding">Now Boarding</a></li><br />
            <li><a href="#higher-calling">Higher Calling</a></li><br />
        </ul>
    </li>
etc...

Extra Note: I'm using jQuery localscroll plugin, which is why I need these links changed to hashes.


Thanks in advance,
Ty

What have you tried so far that didn't work? Are you placing everything in an event handler for jquery's ready event or using the standard window.onload()? Basically what I would do would grab all the anchors, look at the href attribute, and then use the javascript test function to perform a regex test on the href string like this:

var href = "index.php?view=cover"; 
if(/^index\.php\?view=(.*)$/.test(href))
{
     href = href.replace(/^index\.php\?view=/,"#");
}

Thanks for the response, scrappedcola. I've got it working now with this code (placed within jquery's ready event):

$(".navigation").find("a").each(function(){
    var link = $(this).attr("href").toString();
    var eindex = link.indexOf("=", 0);
    link = "#"+link.substr(eindex+1);
    $(this).attr("href", link);
});

Although this seems very bulky and un-jQuery-ish (maybe it's just aesthetics, but I feel my code looks really ugly compared to the nice-looking localscroll settings).

This is probably obvious, but I'm very new to jQuery (although I'm loving it). I know there's a lot of emphasis on "chaining", and despite the fact that my function is really just 5 lines, it seems it could do with some housekeeping.

Fret not, I will definitely mark this thread as solved. But before I do, I was just wondering if you (or anyone else) had any suggestions as to how I might simplify (or pretty-fy) what I've gotten. I'm not opposed to using regex, but I'm not very well-versed in it quite yet.

Thanks again!

Hmm... Just give you a sample here for the future...

function replaceAllIndexPHP() {
  var elems = document.getElementsByTagName("a")
  for (var i=elems.length-1; i>=0; i--) {
    elems[i].href = elems[i].href.replace(/index\.php\?view=/i, "#")
  }
}
This question has already been answered. Start a new discussion instead.