Javascript each() 函数删除链接

Question

我在 prestashop 下有一个网站，我的下拉菜单有不同的类别，都可以点击。我想从“Marques”和“Les Gammes”类别中删除链接，只留下文本。我正在使用each() 函数来选择我的所有类别，但这会返回li 内的数组和li 内的ul。

这里是JSFiddle。

这里是js代码：

$('jms-mega-menu').ready(function () {
// Get each div
$('.notlink').each(function () {
    // Get the content
    var str = $(this).text();
    $(this).html(str);
 });
});

这是我的 html 代码示例。你可以在 fiddle 上找到完整的代码。

<ul jms-mega-menu>
 <div>
  ...
   <ul class="mega-nav level1">
    <li class=" haschild group notlink"><a id="item-8" href="#">Marques</a>
     <ul>
      <li><a id="item-9" href="#">Apple</a></li>
      <li><a id="item-10" href="#">Samsung</a></li>
     </ul>
    </li>
   </ul>
   <ul>
   ...

Answer 1

一种解决方案是使用unwrap 从文本周围删除a 标记。注意使用.notlink > a 只影响作为.notlink 直接子代的锚点，而不影响嵌套列表：

$('.notlink > a').contents().unwrap();

http://jsfiddle.net/orvrj7qs/5/

另一个可能更具扩展性的选项是使用replaceWith，它允许您在需要时对文本进行其他修改：

$('.notlink > a').replaceWith(function(){
    return $(this).text();   
});

在这种情况下，我们只需将锚点替换为锚点内的文本即可。

http://jsfiddle.net/orvrj7qs/6/