Question

我正在尝试做的是将文本换行到ll标记内的div中。这不会是一个问题，但我需要包装特别是在“ - ”（减号）之后出现的文本，包括“减号”本身。

这是我的HTML：

<ul>
    <li>Some list text - Additional text</li>
</ul>

我的结果是我试图实现这个目标：

<ul>
     <li>Some list text <span class="after">- Additional text<span></li>
</ul>

有人能帮助我吗？

提前谢谢。

Answer 1

这样的事情应该这样做。

$('li').each(function() {
  $(this).html($(this).text().replace(/-.*$/, '<span class="after">$&</span>'));
});

Answer 2

看起来您正在尝试创建某种描述性列表而不是简单的无序列表。如果您需要将所有文本保留在一个元素中，我确信有人会发布一个不错的解决方案，但为什么不使用dl代替ul，如下所示：

 <dl>
      <dt>Some list text</dt>
      <dd>- additional text</dd>
 <dl>

这应该达到与尝试在“ - ”符号后出现在新行上后的文本相同的效果，并且您可以修改<dt>和<dl>元素上的填充和边距如果那是你想要的样子，他们就排成一列。如果您正在创建包含列表项（<dt>）的描述性列表以及描述它们的更多子列表项（<dd>），则更好地暗示在可访问性的语义中使用其他方法来近似相同的事物

编辑：在任何人说任何事情之前我都知道问题是使用jQuery要求解决方案，并且此解决方案不使用jQuery。但如果这里的意图是近似描述性列表，那么在HTML中进行语义编码比使用jQuery魔法更好。

Answer 3

听起来你正在走上正轨。使span成为块级元素，如下所示：

<span class='after' style='display: block;'>...</span>

看看是否可以。

哦，然后将内联样式移到样式表中：）

Answer 4

这将在每个列表项之前插入一个换行符。

$(function(){
  $("li").each(function(){
    $(this).html($(this).html().replace(\-\, "<br />-"));
  });
});

Answer 5

下面的内容应该是这样的，请注意这是在我的浏览器中进行干编码，因此需要进行测试。

$('ul li').each(function() {
    var parts = $(this).html().split('-', 1);

    $(this).html(parts[0]);
    if (parts.length == 2) {
        $(this).append(" - " + parts[1]);
    }    
});

Answer 6

$.each($("li:contains('-')"),function(i,n){
  n.innerHTML = n.innerHTML.replace('-','<span class="after">-')+"</span>"
});

用jQuery包装特定符号后的文本

6 个答案: