在链接中的第一个单词后面应用样式并插入换行符
我被要求在WordPress中重新创建一个HTML网站并完成所有工作，除了一个让我难倒的经济酒吧。 见图像： http ： //img36.imageshack.us/img36/8964/menubare.jpg
简而言之，我需要一种方法来对元素的第一个单词进行风格化，而不是其余部分，并在第一个单词后插入换行符。 我确定这是一个快速的jQuery hack，但是对jQ知之甚少，不能让它自己发生。
这是捕获：这些小箭头表示下拉菜单出现。 我有下拉列表工作，但想确保适用于主菜单的任何解决方案，跳过下拉列表（它们是LI项目中的UL列表）。
任何帮助，将不胜感激。
如果没有菜单的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 = ''+parts[0]+'
'; 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; }
看一下工作演示
对演示的更新反映了评论中的代码。
使用选择器：
$('#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 = ''+parts[0]+'
'; parts.shift(); replace += parts.join(' '); obj.html(replace); });
缩短一点。 在这里演示。 。
$('#nav').children('li').find('a').each(function(){ var old = $(this).text(); $(this).html(old.substring(0,old.indexOf(' ')) +'
'+old.substring(old.indexOf(' '),old.length)); });
如果你需要申请一些课程
$(this).html(''+old.substring(0,old.indexOf(' ')) +'
'+old.substring(old.indexOf(' '),old.length)+"");