使用 jQuery 更改菜单中的几项内容

Question

我有这个示例菜单：

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

我对jQuery和Javascript非常糟糕，所以我在这里和那里找到了一些代码，但我不知道如何让它工作。

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

这个想法是浏览菜单并仅更改具有父 li 的 a 标签，类为" .home-block "。这些需要一个指向锚点的链接和一个类" .scroll "添加如下：

<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

除非我误解了您的要求，否则这将起作用。

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

让我知道是否需要一些修改。此代码还包含超过 2 个斜杠的 href URL。因此，与其局限于

domain.com/different-thing-1

你也可以做

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

试试这段代码。

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