Dynamic URL with static query string

Question

I'm writing a mobile menu that needs to have dynamic URL with query string.

Here's part of the HTML:

<ul>
    <li class="has-sub"><a href="#"><img alt="eclipse" src="image.png"/></a>
        <ul role="menubar">    
            <li><a class="link" href="http://sitename.com?ID=7">Parent 1</a></li>
            <li class="has-sub"><a aria-haspopup="true" href="#">Parent 2</a>
                <ul role="menu">
                    <li role="presentaiton"><a class="link" role="menuitem" href="http://sitename.com?ID=21">Child 1</a></li>
                    <li role="presentaiton"><a class="link" role="menuitem" href="http://sitename.com?ID=19">Child 2</a></li>
                    <li role="presentaiton"><a class="link" role="menuitem" href="http://sitename.com?ID=18">Child 3</a></li>
                    <li role="presentaiton"><a class="link" role="menuitem" href="http://sitename.com?ID=17">Child 4</a></li>
                    <li role="presentaiton"><a class="link" role="menuitem" href="http://sitename.com?ID=16">Child 5</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

And here's the JS:

    var absoluteURL = window.location.href;
    var url = $('.link').attr('href')
    url = url.replace('sitename', absoluteURL)

Is there a way I can write dynamic URL with static query string: href= {link} + "ID=7" in the HTML without any plugin?

void · Accepted Answer · 2018-02-27 20:28:24Z

1

Well I guess the whole concern is to fix this url redundancy. And If you dont want to use any templating engine then try this.

I have removed the common part wiz http://sitename.com? and then I am picking all your a's and then I am modifying there hrefs.

var link = "http://sitename.com?";
$("li.has-sub a").attr("href", function(){
  return link+this.href;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="has-sub">
    <a href="#"><img alt="eclipse" src="image.png" /></a>
    <ul role="menubar">
      <li><a href="ID=7">Parent 1</a></li>
      <li class="has-sub"><a aria-haspopup="true" href="#">Parent 2</a>
        <ul role="menu">
          <li role="presentaiton"><a id="link" role="menuitem" href="ID=21">Child 1</a></li>
          <li role="presentaiton"><a id="link" role="menuitem" href="ID=19">Child 2</a></li>
          <li role="presentaiton"><a id="link" role="menuitem" href="ID=18">Child 3</a></li>
          <li role="presentaiton"><a id="link" role="menuitem" href="ID=17">Child 4</a></li>
          <li role="presentaiton"><a id="link" role="menuitem" href="ID=16">Child 5</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

answered Feb 27, 2018 at 20:28

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

YogaPanda Over a year ago

how about the first <a> Parent 1, it doesn't have the same class?

void Over a year ago

@YogaPanda will be managed! "li.has-sub a" this is my selector. :)

Collectives™ on Stack Overflow

Dynamic URL with static query string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related