jQuery: wrap every nth word in a span
Is it possible in jquery to wrap each nth word in a span
so lets say I have the html strin开发者_运维知识库g
<h3>great Prices great Service</h3>
this will be wrapped as follows ( each 2nd word )
<h3>great <span>Prices</span> great <span>Service</span></h3>
Any help will be appreciated
var h3 = $('h3');
var text = h3.text().split(' ');
for( var i = 1, len = text.length; i < len; i=i+2 ) {
text[i] = '<span>' + text[i] + '</span>';
}
h3.html(text.join(' '));
http://jsfiddle.net/H5zzq/
or
var h3 = $('h3');
var text = h3.text().split(' ');
$.each(text,function(i,val) {
if( i % 2) {
text[i] = '<span>' + val + '</span>';
}
});
h3.html(text.join(' '));
http://jsfiddle.net/H5zzq/1
To deal with &
as you requested in your comment, I created an offset
variable that is incremented whenever one is encountered.
var h3 = $('h3');
var text = h3.text().split(' ');
var offset = 0;
for( var i = 1, len = text.length; i < len; i++ ) {
if( text[i] === '&' ) {
offset++;
} else if( (i-offset) % 2 ) {
text[i] = '<span>' + text[i] + '</span>';
}
}
h3.html(text.join(' '));
http://jsfiddle.net/H5zzq/3
You could do it by first getting the text of the <h3>
element, then split the string to an array, cycle through the array in a for
loop, and whenever your iterator i
is even, add span
tags to the current word. Then, just rebuild the string and insert it as the text
property of your <h3>
tag.
精彩评论