5

我正在尝试围绕标题的前半部分或后半部分包装一个类，以便我可以使用 jQuery 创建更多动态和酷炫的标题。

从理论上讲，我想找到句子中的所有空格并将其分成两部分。如果标题包含奇数个单词，脚本应该检测到这一点，并将类添加到最近的单词。

4

4 回答 4

4

这是一个有趣的问题。我会使用方便的 javascript splice方法。Splice 可用于插入和删除数组的项。我建议打开检查员并尝试我在下面编写的一些示例。

首先，我们将使用 jQuery 选择标题，然后操作 html 内容字符串。我假设您要操作的特定标头将具有一个类，并且我已替换为“动态”：

var header = $("h1.dynamic").text();
    => "Header with some other stuff"
var header_as_array = header.split(" ")
    => ["Header", "with", "some", "other", "stuff"]
var first_half = header_as_array.splice(0, header_as_array.length/2)

请记住 splice 会更改原始数组，因此此时：

first_half = ["Header", "with"]
header_as_array = ["some", "other", "stuff"]

现在，您可以将它们重新组合在一起，并使用 span 将它们包裹起来，如下所示：

var first = '<span class="first_half">'+first_half.join(" ")+'</span>';
var second = '<span class="second_half">'+header_as_array.join(" ")+'</span>';

var finished =  first+" "+second;

最后，我们将使用 jQuery 将完成的字符串放回标题中：

$("h1.dynamic").html(finished);

我用奇数个单词写标题的方式总是将后半部分作为较长的一半。如果你更喜欢它，你可以这样做：

var splice_location = Math.ceil(test_as_array.length/2);
var first_half = header_as_array.splice(0, splice_location);

默认情况下，非整数值将被截断，但这里我们使用上限函数向上舍入而不是向下舍入。

于 2011-03-01T08:50:45.880 回答
3

不错的@lashleigh。您可以在这里查看一个工作示例：

http://jsfiddle.net/johnhunter/KRJdm/

@Tony，我已经实现了你所追求的作为一个 jquery 插件。您在要格式化的标题上调用它：

$(function() {
    $('h1').splitWords();
});

...它会产生这样的 html 输出：

前：

<h1>This is a long headline</h1>

后：

<h1>
    <span class="wrap-1">This is </span>
    <span class="wrap-2">a long headline </span>
</h1>

更新：

不是原始问题的一部分，但我更新了示例以允许您指定换行发生在哪个单词处。如果您提供索引参数，它将使用单词列表上的偏移量（减去值从末尾倒数）。例如：

$('h1.a').splitWords();   // Split these words equally
$('h1.b').splitWords(1);  // Split these after the first word
$('h1.c').splitWords(-2); // Split these after the second last word

http://jsfiddle.net/johnhunter/KRJdm/

于 2011-03-01T08:57:12.353 回答
0

尝试以下

<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var headlineText = $('h1.mainHeader').text();
            var headlineWords = headlineText.split(' ');
            var headlineLength = headlineWords.length;
            var headlineMidPoint = (headlineLength / 2) + 1;

            var headlineFirstHalfText = headlineWords.slice(0, headlineMidPoint).join(' ') + ' ';
            var headlineSecondHalfText = headlineWords.slice(headlineMidPoint).join(' ');

            var d = document;
            var headlineFirstHalf = $(d.createElement('span')).addClass('headlineHead').text(headlineFirstHalfText);
            var headlineSecondHalf = $(d.createElement('span')).addClass('headlineTail').text(headlineSecondHalfText);
            var headline = $(d.createElement('h1')).addClass('mainHeader').append(headlineFirstHalf).append(headlineSecondHalf);

            $('h1.mainheader').replaceWith(headline);
        });
    </script>
    <style type="text/css">
        h1 { font-size:18px;}
        span.headlineTail {font-size:1.2em;}
    </style>
</head>
<body>
<h1 class="mainHeader">This is a dynamic headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</body>
</html>
于 2011-03-01T09:03:37.460 回答
-1

lashleigh 的回答很好，但是，我会挑战 jQuery 是实现此效果的最佳技术选择的前提。我倾向于建议做同样的服务器端。使用 PHP、Python 或您使用的任何语言来表达标记，然后使用插入的类缓存输出。节省页面重量，这意味着用户的浏览器不必在加载每个页面时计算所有内容。对移动设备等轻客户端的显着优势。

这是 PHP 中的一个示例。

<?php 
        $headline = "This is a headline  of epic proportions";
        $split = explode(' ', $headline);
        $a = array_slice($split, 0, (count($split)/2));
        $b = array_slice($split, (count($split)/2));
        $headline = '<span class="whatever">'. join(' ', $a) . '</span>' . join(' ', $b);
        print $headline;
?>
于 2011-03-01T09:05:59.423 回答