jQuery：將div標記中的每2個單詞換行

Question

我試圖將每2個單詞換成<div>標記。
例如所需的輸出看起來像這樣：
<div>one two</div><div>three four</div><div>five six</div>等等等等
但我真的開始，前兩個單詞都被忽略了，我真的開始：
one two<div>three four</div><div>five six</div>
這是我的代碼，
HTML ：

<h2><div>This is some long heading text to use as an example. This is some long heading text to use as an example</h2> 

的jQuery：

$("h2 div").each(function() { 
    var html = $(this).html().split(" "); 
    var newhtml = []; 

    for(var i=0; i< html.length; i++) { 

     if(i>0 && (i%2) == 0) 
      newhtml.push("</div><div>"); 

     newhtml.push(html[i]); 
    } 

    $(this).html(newhtml.join(" ")); 
}); 

我已經試過了後加入<div>標籤標籤在html中實現這種效果，但它似乎仍然沒有工作。任何建議將不勝感激！

Answer 1

你可以這樣做：

HTML：（沒有在那裏又DIV）

<h2>This is some long heading text to use as an example. This is some long heading text to use as an example</h2> 

JS（注意最後一行）：

$("h2").each(function() { 
    var html = $(this).html().split(" "); 
    var newhtml = []; 

    for(var i=0; i< html.length; i++) { 

     if(i>0 && (i%2) == 0) 
      newhtml.push("</div><div>"); 

     newhtml.push(html[i]); 
    } 

    $(this).html("<div>"+ newhtml.join(" ") +"</div>"); 
}); 

Answer 2

您明確地跳過循環中的第一個匹配，因此在循環提供幫助之前添加newhtml.push("<div>")。 這仍然留下你創建一個未關閉的div的問題，因此在建議循環之後添加newhtml.push("</div>")也是如此。

Answer 3

這是爲我工作：

<h2>This is some long heading text to use as an example. This is some long heading text to use as an example</h2> 
<script type="text/javascript"> 
    $("h2").each(function() { 
     var html = $(this).html().split(" "); 
     var newhtml = []; 
     newhtml.push("<div>"); 

     for(var i=0; i< html.length; i++) { 

      if(i>0 && (i%2) == 0) 
       newhtml.push("</div><div>"); 

      newhtml.push(html[i]); 
     } 

     newhtml.push("</div>"); 

     $(this).html(newhtml.join(" ")); 
    }); 
</script> 

編輯：其實對於Entoarox答案:)代碼

Answer 4

var html = 'This is some long heading text to use as an example.'.split(" "); 
var newhtml = []; 
for(var i=0 ; i<html.length-1 ; i+=2) newhtml.push(html[i]+' '+html[i+1]); 
if(html.length&1) newhtml.push(html[html.length-1]); 

'<div>'+newhtml.join('</div><div>')+'</div>' 

的最後一行是字符串"<div>This is</div><div>some long</div><div>heading text</div><div>to use</div><div>as an</div><div>example.</div>"

Answer 5

我不以任何方式正則表達式親，而只是提供了一個可能的選擇，我認爲你可以做到這一點使用類似：

string.replace(/(\S+ \S+)/g, "<div>$1</div>"); 

像這樣：

$("h2 div").each(function(){ 
    this.innerHTML = this.innerHTML.replace(/(\S+ \S+)/g, "<div>$1</div>"); 
}); 

http://jsfiddle.net/6JeFH/1/

Answer 6

Please have a look at the fiddle:

我已經提供了兩個例子

先不依賴於HTML是最初畸形

<h2> 
    <div> 
      This is some long heading text to use as an example. 
      This is some long heading text to use as an example 
    </div> 
</h2> 

而且一個地方只存在<h2>標籤和奇數字

<h2> 
    This is some long heading text to use as an example. 
    This is some long heading text to use as an example oddnumber 
</h2> 

同一個JavaScript運行在他們的

$("h2 > div").each(divByTwo); 
$("h2").each(divByTwo); 

function divByTwo() { 
    var html = $(this).html().trim().split(" "); 
    var newhtml = []; 
    for(var i=1; i< html.length; i += 2) { 
     newhtml.push("<div>" + html[i - 1] + " " + html[i]+ "</div>");  
    } 

    if (html.length % 2 !== 0) { 
     newhtml.push("<div>" + html[html.length - 1] + "</div>"); 
    } 
    $(this).html(newhtml.join(" ")); 
}