[英]jQuery: wrap every 2 words in div tag
我試圖在<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(" "));
});
我已經嘗試在html中的<h2>
<div>
標簽之后添加一個<div>
標簽來實現這種效果,但它似乎仍然無法正常工作。 任何建議將不勝感激!
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>"
我不是一個正則表達式專業人士,但只是為了提供一個可能的選擇,我認為你可以使用類似的東西:
string.replace(/(\S+ \S+)/g, "<div>$1</div>");
像這樣:
$("h2 div").each(function(){
this.innerHTML = this.innerHTML.replace(/(\S+ \S+)/g, "<div>$1</div>");
});
您顯式跳過循環中的第一個匹配,因此在循環之前添加newhtml.push("<div>")
會有所幫助。 這仍然會留下你創建一個未關閉的div的問題,因此建議在循環之后添加newhtml.push("</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>
<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的代碼答案:)
你可以這樣做:
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>");
});
我提供了兩個例子
第一個不依賴於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(" "));
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.