Use jQuery to change several things in menu

Question

I have this example-menu:

<div id="menu">
<ul>
    <li class="menu-item"><a class="a_menu_item" href="domain.com/home/“>Home</a></li>
    <li class="menu-item"><a class="a_menu_item" href="domain.com/example-page/“>Example Page</a></li>
        <ul class="sub-menu">
        <li class="home-block menu-item"><a class="a_menu_item" href="domain.com/different-thing-1/“>Different Thing 1</a></li>
        <li class="menu-item"><a class="a_menu_item" href="domain.com/example-page2/“>Example Page 2</a></li>
        </ul>
    </li>
    <li class="home-block menu-item"><a class="a_menu_item" href="domain.com/different-thing-2/“>Different Thing 2</a></li>
</ul>
</div>

I am very bad with jQuery and Javascript, so I found some code here and there to start with, but I have no clue how to make it work.

    $(document).ready(function(){

$('#menu li').each(function(){
var string = $( '#menu li.home-block>a' ).attr('href');

var stringmin = string.slice(0, -1);    //Removes last slash
var result = stringmin.split('/');         //Splits into an array

var final = result.pop();               //Removes last value and grabs the last value
var previous = result.join('/');        //Grabs the previous part

$( '#menu li.home-block>a' ).href = previous + '/#' + final;  //Put it all back together

$( '#menu li.home-block a' ).addClass( 'scroll' );
});
});

The idea is to go through the menu and change only the a-tags that have a parent li with the class ".home-block". These need a link that go to an anchor and a class ".scroll" added like this:

<div id="menu">
<ul>
    <li class="menu-item"><a class="a_menu_item" href="domain.com/home/“>Home</a></li>
    <li class="menu-item"><a class="a_menu_item" href="domain.com/example-page/“>Example Page</a></li>
        <ul class="sub-menu">
        <li class="home-block menu-item"><a class="a_menu_item scroll” href="domain.com/#different-thing-1/“>Different Thing 1</a></li>
        <li class="menu-item"><a class="a_menu_item" href="domain.com/example-page2/“>Example Page 2</a></li>
        </ul>
    </li>
    <li class="home-block menu-item"><a class="a_menu_item scroll” href="domain.com/#different-thing-2/“>Different Thing 2</a></li>
</ul>
</div>

First, you have some type errors in your code. This `”` is not the same of this `"`. And there is an `li` that is surplus. — Yulio Aleman Jimenez, Apr 11 '17 at 00:45

trevster344 · Accepted Answer · 2017-04-11T01:08:23.030

Unless I misunderstood your request this would work.

$('.home-block a:first-child').addClass('scroll').each(function () {
  var url = $(this).attr('href'); //Get href
  var last_slash = url.lastIndexOf('/'); //Get position of last slash
  var isLastSlash = (last_slash == (url.length - 1));
  if (isLastSlash) { //Has trailing slash
    url = url.substring(0, url.length - 1); //Remove last slash
    last_slash = url.lastIndexOf('/'); //Update last slash position.
  }
  var f_half = url.substring(0, last_slash);
  var l_half = url.substring(last_slash + 1);
  $(this).attr('href', f_half + '/#' + l_half);
});

Let me know if there needs to be some revision. This code also accommodates a href url with more than 2 slashes. So instead of being limited to

domain.com/different-thing-1

You could also do

domain.com/#different-thing-1
domain.com/different-thing-1/#different-sub-thing-1/
domain.com/different-thing-1/different-sub-thing-1/#sub-thing-thing

The only change I made was '.home-block a:first-child' to '.home-block>a:first-child', adding the '>' helps to avoid unwanted spilling into any sub-menu. — Marc, Apr 13 '17 at 07:58

score 0 · Answer 2 · answered Apr 11 '17 at 01:07

Try this code.

$(document).ready(function(){
 var $item = $( '#menu li.home-block a' );
  $item.each(function(){
    $(this).addClass( 'scroll' );
    var url = $(this).attr('href').split("/");
    if(url.length > 0){
      url[1] = "#" + url[1];
    } else {
      url[1] = "#";
    }
    $(this).attr("href", url.join("/"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<ul>
    <li class="menu-item">
      <a class="a_menu_item" href="domain.com/home/">Home</a>
    </li>
    <li class="menu-item">
      <a class="a_menu_item" href="domain.com/example-page/">Example Page</a>
    </li>
        <ul class="sub-menu">
          <li class="home-block menu-item">
            <a class="a_menu_item" href="domain.com/different-thing-1/">Different Thing 1</a>
          </li>
          <li class="menu-item">
            <a class="a_menu_item" href="domain.com/example-page2/">Example Page 2</a>
          </li>
        </ul>
    <li class="home-block menu-item">
      <a class="a_menu_item" href="domain.com/different-thing-2/">Different Thing 2</a>
    </li>
    <li class="home-block menu-item">
      <a class="a_menu_item" href="domain.com/">Different Thing 3</a>
    </li>
</ul>
</div>

I invite you to mark the answer that best match as the right answer for your question. — Yulio Aleman Jimenez, Apr 12 '17 at 01:55

Use jQuery to change several things in menu

2 Answers2