Javascript 对链接中的第一个单词应用样式并在其后面插入换行符

我被要求在WordPress中重新创建一个HTML站点，并且完成了所有的工作，除了一个菜单栏，这让我感到困惑。如图所示：

简言之，我需要一种方法来将元素的第一个单词的样式化为不同于其他单词的样式，并在第一个单词后面插入一个换行符。我确信这是一个快速的jQuery攻击，但我对jQ的了解还不足以让它在我自己身上实现

这里有一个陷阱：这些小箭头表示会出现一个下拉菜单。我有下拉菜单工作，但想确保任何解决方案适用于主菜单，跳过下拉菜单-他们是UL列表在一个LI项目

任何帮助都将不胜感激

$('#nav').children('li').find('a').each(function(){
var old = $(this).text();

$(this).html(old.substring(0,old.indexOf(' ')) +'<br/>'+old.substring(old.indexOf(' '),old.length));
});

如果你需要申请一些课程

$(this).html('<span class="first">'+old.substring(0,old.indexOf(' ')) +'</span><br/><span class="next">'+old.substring(old.indexOf(' '),old.length)+"</span>");

---

如果没有菜单的HTML示例，很难给出具体的答案

但是您可以使用如下的jQuery，它将允许您向第一个单词和其他单词添加样式。它会。在空格上分割HTML，给你一个数组。将第一个项目包裹在一个跨度中，以允许设置样式。然后使用jQuery的.each循环遍历其余项并将它们添加回字符串。然后将HTML替换为新版本：

$('#header > ul.nav > li > a').each(function() {
    var obj = $(this);
    var text = obj.html();
    var parts = text.split(' ');
    var replace = '<span class="firstWord">'+parts[0]+'</span><br />';
    parts.shift();
    $.each(parts, function(key, value) { 
        replace += ' '+value;
    });
    obj.html(replace);
});

看一看

从注释中反映代码

使用选择器：

$('#header > ul.nav > li > a')

仅选择第一个菜单项。您只需添加：

.firstWord {
    font-size: 15px;    
}

添加到CSS以调整第一项的大小

很好的建议，您可以将jQuery更改为：

$('#header > ul.nav > li > a').each(function() {
    var obj = $(this);
    var text = obj.html();
    var parts = text.split(' ');
    var replace = '<span class="firstWord">'+parts[0]+'</span><br />';
    parts.shift();
    replace += parts.join(' ');
    obj.html(replace);
});

---

把它缩短一点

您将使用什么html标记？菜单链接位于：header nav ul li a；下拉列表中的孩子们位于标题nav ul li ul li navbar的完整HTML位于@BrokenGlass我想无论如何都会有两个词我改变了它可能是我的错，我没有看OPThis提供的菜单链接除了子列表外，其他都很好。请记住，我有一个主列表[ul][li]，然后在一些li标签中有它们自己的[ul]s。。。第二个嵌套列表必须不受影响。这似乎也没有给我一个样式选项，它只是插入了一个中断。这对内部li没有任何作用。如果你想插入一些类，请参见编辑谢谢-如果有帮助的话，我已经放置了一个完整HTML的副本。我已经更改了选择器来处理你的HTML，现在它应该在第一个项目周围加上一个跨度，然后在它之后的一个折线允许你调整第一个单词。用一个简单的连接？替换+=零件。连接“”；真有办法！好的观点@Edwin V-我已经在答案中添加了建议。

$('#header > ul.nav > li > a').each(function() {
    var obj = $(this);
    var text = obj.html();
    var parts = text.split(' ');
    var replace = '<span class="firstWord">'+parts[0]+'</span><br />';
    parts.shift();
    replace += parts.join(' ');
    obj.html(replace);
});