将样式应用到链接中的第一个单词后面并插入换行符

Question

我被要求在WordPress中重新创建一个HTML网站，并将其全部完成，除了一个让我难倒的杂乱吧。请参阅：http://img36.imageshack.us/img36/8964/menubare.jpg

总之，我需要一种方法来将元素的第一个单词格式化为与其余部分不同的方式，并在第一个单词之后插入换行符。我确信这是一个快速的jQuery hack，但是对jQ不够了解，无法让我自己发生。

这里有一个问题：那些小箭头指示出现一个下拉菜单。我的下拉菜单可以正常工作，但是要确保适用于主菜单的任何解决方案都跳过下拉菜单（它们是LI项目中的UL列表）。

任何帮助，将不胜感激。

Answer 1

没有你的菜单的HTML例子，它很难给你一个明确的答案。

但是，您可以使用如下的一些jQuery，它将允许您将样式添加到第一个单词以及其余的部分。它将.split()空格上的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); 
}); 

范例CSS：

.firstWord { 
    font-size: 15px;  
} 
.menuHeader { 
    margin-left: 10px; 
    float: left; 
    font-size: 40px; 
} 
.menu { 
    width: 100%; 
    height: 120px; 
    background-color: #FF8C00;  
} 

看看一个working demo

---

Update to the demo反映注释代码。

使用选择：

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

只选择第一个菜单项。你只需要添加：

.firstWord { 
    font-size: 15px;  
} 

给你的CSS调整第一项的大小。

---

通过Edwin V.很好的建议，你可以改变了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); 
}); 

要缩短一点。 Demo here.。

Answer 2

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