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()来实现这一目标：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

同样在一行：

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

另外，要将data-menuanchor添加到所有li元素，您需要一个迭代器。这是一个使用jquery .filter()

的例子

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这应该可以解决问题：

$(function(){
    $('li', $('#menu-1')).each(function(){
        $(this).attr('data-menuanchor', $('a', $(this)).attr('href').replace('#',''));
    });
})

Answer 3

检查这个小提琴：http://jsfiddle.net/uu5nbn7r/

试试这个：

$(document).ready( function($) {
  $('#menu-1 li').each(function(i, val){
     $(this).attr('data-menuanchor',$(this).find('a').attr('href').replace('#',''));
  });
});

使用href链接向元素添加属性但没有＃

3 个答案: