javascript - 如何删除元素内的跨度？

Question

以下代码向菜单 ( .active) 添加和删除“活动”类它还向活动链接添加了一个跨度类<span class="filet_menu"></span>。

如何删除此跨度类？我试过展开，但它没有删除跨度类“展开”。

这是我的代码：

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

score 3 · Accepted Answer

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

$("#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/

score 2 · Accepted Answer

我相信你想删除跨度，但保留跨度内的数据，所以 .remove() 对你不起作用。你可以使用这个：

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

score 1 · Accepted Answer

一些改进代码的建议：

与其添加和删除，不如<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;
}

score 1 · Accepted Answer

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

http://jsfiddle.net/LMm28/

另一方面，将跨度一直保留在那里并添加/删除.filet_menu类可能会更容易。

javascript - 如何删除元素内的跨度？

4 回答 4

Related

Reference