Utilisez jQuery pour changer plusieurs choses dans le menu

Question

Je cet exemple 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> 

Je suis très mauvais avec jQuery et Javascript, donc je l'ai trouvé un peu de code ici et là pour commencer, mais je ne indice comment le faire fonctionner.

$(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'); 
}); 
}); 

L'idée est de passer par le menu et modifier uniquement les balises d'un qui ont une li mère avec la classe « .home-block ». Ces besoin d'un lien qui vont à une ancre et une classe « .scroll » ajouté comme ceci:

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

Answer 1

À moins d'avoir mal compris votre demande cela fonctionnerait. Informez-moi s'il doit y avoir une révision.

$('.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); 
}); 

Ce code accepte également une URL href avec plus de 2 barres obliques. Ainsi, au lieu d'être limité à

domain.com/different-thing-1 

Vous pouvez également faire

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 

Answer 2

Essayez ce code.

$(document).ready(function(){ 
 
\t 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>