5

jQuery でよりダイナミックでクールな見出しを作成できるように、見出しの前半または後半をクラスでラップしようとしています。

理論的には、文中のすべてのスペースを見つけて 2 つに分割したいと考えています。見出しに含まれる単語の数が奇数である場合、スクリプトはそれを検出し、最も近い単語にクラスを追加する必要があります。

4

4 に答える 4

4

これは興味深い問題です。私は便利なjavascriptスプライスメソッドでアプローチします。スプライスを使用して、配列の項目を挿入および削除できます。インスペクターを開いて、以下に書いた例のいくつかを試してみることをお勧めします。

まず、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);

デフォルトでは、整数以外の値は切り捨てられますが、ここでは、天井関数を使用して、切り捨てではなく切り上げを行っています。

于 2011-03-01T08:50:45.880 に答える
3

いいね @lashleigh。ここで実際の例を見ることができます：

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

@トニー、私はあなたが求めているものを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 に答える