Question

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

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

Answer 1

这是一个有趣的问题。我会使用方便的javascript 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)

请记住，拼接会更改原始数组，所以此时：

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

现在，您可以将它们连接在一起，并使用这样的跨度包装它们：

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);

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

Answer 2

好人@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>

<强>更新：

不是原始问题的一部分，但我更新了示例，以便您指定包装发生的单词。如果提供索引参数，它将在单词列表中使用该偏移量（减去值从末尾开始计数）。 e.g：

$('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/

Answer 3

尝试以下

<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>

Answer 4

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;
?>

如何围绕标题的前半部分包装课程？

4 个答案: