如何用jquery圍繞標題的前半部分包裝類？

我想圍繞一個標題的第一個或第二個一半，以便我可以創建更多的動態和酷的標題與jQuery的類。如何用jquery圍繞標題的前半部分包裝類？

理論上我想找到句子中的所有空格，並將它分成兩部分。如果標題包含不均勻的單詞數量，腳本應檢測該單詞並將該類添加到最近的單詞中。

見更清楚的解釋這一形象：http://images.homey.se/dynamic_headline.png

2011-03-01 Tony Bolero

不錯的@lashleigh。你可以看看這裏的工作示例：

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

來源

2011-03-01 08:57:12 johnhunter

在我看來，一個插件是巨大的矯枉過正，但每個人都是自己的。 :-) – Benson 2011-03-01 09:02:52

@Benson它的一個公平點。也許jQuery是一個功能的矯枉過正。插件本身只不過是一個包裝你將要使用的代碼的函數，但是它可以很容易地重用。隨意如果你喜歡:) – johnhunter 2011-03-01 09:10:05

PS撕裂出來：該插件是20線 - 包括空的：d – johnhunter 2011-03-01 09:12:43

這是一個有趣的問題。我會用方便的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);

默認情況下，非整數值將被截斷，但在這裏我們使用的是天花板函數，而不是圓的東西上下的。

來源

2011-03-01 08:50:45 lashleigh

哇，好服務。我在2小時前問過這個問題，我得到了這個很好的幫助。我謝謝你！ – 2011-03-01 11:03:20

沒問題，我很高興這很有幫助，這是一個很好的第一個問題。說謝謝的最好方法是將答案標記爲「已接受」，這會給答案員獎勵點併產生良好的業力。我希望SO社區繼續善待你。 – lashleigh 2011-03-01 11:21:19

哦，我在這裏很麻煩。我已經接受了johnhunters的回答，但我真的很感激你解釋東西的方式。我保證，當我達到15p時，我將返回並對您的答案進行投票。我想你會得到積分？ – 2011-03-01 13:00:51

請嘗試以下

<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-01 09:03:37

男孩，這是很多代碼。我想使用的createElement和addClass是有點矯枉過正，當你已經在做字符串操作，可以很容易地拋出的周圍。 – Benson 2011-03-01 09:15:56

-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-01 09:05:59 Prydie

絕對！ ...如果你有能力實施它。 – johnhunter 2011-03-01 09:17:41

有趣的想法，但這是一個微不足道的操作，即使在移動設備上也可能需要不到一毫秒的時間。你的論點聽起來像是一個過早優化的例子。我在服務器上看到的唯一原因是你可能已經在變量中包含頭文本 - 如果是這樣的話，那麼值得在那裏做，因爲這意味着更少的代碼來維護。 – Benson 2011-03-01 09:19:06

@Benson我喜歡你關於代碼可維護性的觀點，我同意它確實顯得爲時過早。但是，我認爲只要選擇正確的技術來完成任務，只要這樣做不會產生太大的時間或金錢投資。假設該網站不是靜態HTML，那麼在後端插入這種格式將是微不足道的。可能比javascript更簡單的代碼。_查看PHP添加到我的帖子中_ – Prydie 2011-03-12 10:55:42

如何用jquery圍繞標題的前半部分包裝類？

回答

相關問題