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

我被要求在WordPress中重新创建一个HTML网站，并完成了所有工作，除了一个让我感到困惑的栏目。参见图片：http://img36.imageshack.us/img36/8964/menubare.jpg

简而言之，我需要一种方式来对元素的第一个单词进行样式化，使其不同于其余元素，并在第一个单词之后插入换行符。我敢肯定这是一个快速的jQuery技巧，但是对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 = '<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.。

关于javascript - 对链接中的第一个单词应用样式并在其后插入换行符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5451071/