如何在锚文本后添加跨度？

Posted 2023-05-08

【中文标题】如何在锚文本后添加跨度？

【英文标题】：How can I add a span after the text in an anchor?

【发布时间】：2020-06-24 22:50:42

【问题描述】：

我想将 class=caret 添加到 CMS 中的引导模板到所有具有 class="has-submenu" 的锚点，如

所示

< a href="#" class="has-submenu" 
             id="sm-15840459350560935-1" 
             aria-haspopup="true" 
             aria-controls="sm-15840459350560935-2" 
             aria-expanded="false">Dropdown < span class="caret">< /span>< /a>

我尝试了几种解决方案，例如

$( "a.has-submenu" ).append(document.createTextNode("."))
                    .html( "<span class='caret'></span>" );

这不起作用。 < b> class="caret" < /b> 也可以，代码可以是javascript 或php。

【问题讨论】：

您的问题似乎过于复杂。您只是将跨度附加到锚点，对。模板和文本节点是怎么回事？

您是要添加类还是元素？

【参考方案1】：

在您的 jQuery-Selector 上使用 .each()，然后附加您的 span：

$('a.has-submenu').each(function() 
  $(this).append('<span class="caret"></span>')
);

a 
  display: block;
  padding: 1em;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="has-submenu" id="a1">Text</a>
<a href="#" class="has-submenu" id="a2">Text</a>
<a href="#" class="has-submenu" id="a3">Text</a>

【讨论】：

Ruben Danielyan 已经回答了您的问题。将离开我的sn-p。

这使得 围绕 Dropdown 而不是 .... >Dropdown --- 这是我的问题...

在 php 中类似于： if( in_array('docs',$attributes['class']) ) $format = '$label';

看看我的sn-p。我刚刚再次检查，它提供了以下结构：<a href="#" class="has-submenu" id="a1">Text<span class="caret"></span></a>。您提供的与 PHP 相同的嵌套。一个a，里面有文字加上相邻的span。这里有一个可以玩的 CodePen：codepen.io/Sixl/pen/ExjEELJ

我猜你使用的是 Bootstrap 3.x.x？ span.caret 用于该版本中的下拉菜单。我将链接版本设置为 3.3.7 以反映框架的使用。