javascript - 将属性添加到带有 href 链接但没有 # 的元素

Question

我想使用 href 链接将属性添加到 li 但没有 #例如:

<ul id="menu-1" class="menu">
<li id="menu-item-17" class="menu-item"><a href="#firstPage">first Page</a></li>
<li id="menu-item-13" class="menu-item"><a href="#secondPage">second Page</a></li>
<li id="menu-item-14" class="menu-item"><a href="#thirdPage">third Page</a></li>
</ul>

会

<ul id="menu-1" class="menu">
<li id="menu-item-17" class="menu-item" data-menuanchor="firstPage"><a href="#firstPage">first Page</a></li>
<li id="menu-item-13" class="menu-item" data-menuanchor="secondPage"><a href="#secondPage">second Page</a></li>
<li id="menu-item-14" class="menu-item" data-menuanchor="thirdPage"><a href="#thirdPage">third Page</a></li>
</ul> 

这是将属性添加到 li 的代码

jQuery(document).ready( function($) {
$('#menu-1 li').attr('data-menuanchor', '**here i need to add the href without #**')
});

Answer 1

您可以使用 String.prototype.replace()实现这一目标:

jQuery(document).ready(function($) {
  //get the url
  var oldUrl = $("#menu-item-1").children().attr("href");
  //remove # using String.prototype.replace()
  var url = oldUrl.replace(/#/, "");
  //add attribute data-menuanchor to li element
  $('#menu-1 li').attr('data-menuanchor', url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-1" class="menu">
  <li id="menu-item-1" class="menu-item"><a href="#firstPage">first Page</a> 
  </li>
</ul>

同样在一行中:

jQuery(document).ready(function ($) {
    $('#menu-1 li').attr('data-menuanchor', $("#menu-item-1").children().attr("href").replace(/#/, ""));
});

还要将 data-menuanchor 添加到所有 li 元素，您需要一个迭代器。这里有一个使用 jquery 的例子 .filter()

jQuery(document).ready(function($) {
  $('#menu-1 li').filter(function() {
    $(this).attr('data-menuanchor', this.children[0].hash.replace(/#/, ""));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-1" class="menu">
  <li id="menu-item-17" class="menu-item"><a href="#firstPage">first Page</a>

  </li>
  <li id="menu-item-13" class="menu-item"><a href="#secondPage">second Page</a>

  </li>
  <li id="menu-item-14" class="menu-item"><a href="#thirdPage">third Page</a>

  </li>
</ul>