Question

以下代码在菜单中添加并删除“有效”类（.active）它还会向活动链接<span class="filet_menu"></span>添加范围类。

如何删除此span类？我试过打开但是它没有删除span类“unwrap”。

这是我的代码：

$("#menu a").click(function() {
  $("#menu a").each(function() {
    $(this).removeClass("active");

    //Don't work :
    //$(this).unwrap('<span class="filet_menu"></span>');
    //$(this).contents().unwrap();
    //$('(this) > .active').unwrap();
  });
  $(this).addClass("active");
  $(this).wrapInner('<span class="filet_menu"></span>');
});

.active {
  color: #32c0ce !important;
}

.filet_menu {
  border-bottom: 2px solid #32c0ce;
  padding-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="header">
    <div id="contenu_header">
      <h1>Sébastien Gicquel</h1>
      <ul id="menu">
        <li><a id="bt_diaporama" href="#diaporama">Home</a></li>
        <li><a id="bt_presentation" href="#presentation">Présentation</a></li>
        <li><a id="bt_realisations" href="#realisations">Réalisations</a></li>
        <li><a id="bt_contact" href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- fin contenu_header -->
  </div>
  <!-- fin header -->
  <div id="page">

Answer 1

您需要先打开内容才能打开包装。而且你不需要每个循环

$("#menu a").click(function() {         
     $("#menu a.active").removeClass("active");
     $(this).addClass("active");
     $('span.filet_menu').contents().unwrap();// get previous span contents first and unwrap
     $(this).wrapInner('<span class="filet_menu"></span>');// this wraps current anchor's contents  
 });

http://jsfiddle.net/syXnH/

或者你真的需要跨度吗？为什么不只是添加/删除类

$("#menu a").click(function() {
    $("#menu a.active").removeClass("active filet_menu");
    $(this).addClass('filet_menu active');
});

http://jsfiddle.net/HwTNz/

Answer 2

我相信你想要删除跨度，但保留跨度内的数据，因此.remove（）将不适合您。你可以使用它：

$(this).html(
    $(this).find("span.filet_menu").html()
);

Answer 3

有关改进代码的一些建议：

不是添加和删除<span>，而是在加载时为每个项目创建一次。每次修改DOM时，浏览器都必须执行昂贵的布局计算。您可以通过CSS控制它的显示，具体取决于它的父active类。
您不需要迭代每个菜单项来删除active类，只需使用选择器

JavaScript的：

$("#menu a").each(function() {
    $(this).wrapInner('<span class="filet_menu"></span>');
    $(this).click(function() {
        $('#menu a.active').removeClass('active');
        $(this).addClass('active');
    });
});

CSS：

.active
{
    color:#32c0ce !important;
}

.active .filet_menu
{
    border-bottom: 2px solid #32c0ce;
    padding-bottom:2px;
}

Answer 4

$(".filet_menu", this).each(function () {
   $(this).replaceWith(this.childNodes);
});

http://jsfiddle.net/LMm28/

另一方面，可能更容易在整个时间内只有跨度，只需添加/删除.filet_menu类。

如何删除元素内的span？

4 个答案: