私がする必要があるのは<p>
、要素内の最初のタグを取得し、すべての単語をループして、それらを<span>
タグでラップすることです。このためのスクリプトを作成しましたが、うまくいったと思いましたが、<p>
タグに一部の文字が含まれていると壊れてしまうようです。しかし、それを壊す原因となるキャラクターはわかりません。
これが私の現在のコードです:
$(document).ready(function(){
// Transform is set on html tag by modernizr
// Apply this on all .quote boxes, even if there are multiple (most likely aren't)
$('.csstransforms .quote').each(function() {
// Get data
var elem = $(this).find('p:first'),
html = elem.text(),
words = html.split(" "),
charCount = html.length
$(this).append('<p class="fixed"></p>');
// Add new words
var tmpWord = '';
for(i=0; i< words.length ; i++) {
tmpWord = $.trim(words[i]);
if(tmpWord && tmpWord != "") {
// Maybe replace with $(elem).next('.fixed') or something?
$('.csstransforms .quote .fixed').append('<span>'+ tmpWord +' </span>');
}
}
// Check word count, make size smaller if needed
if(charCount > 150) {
// Add class to .quote box
$(this).addClass('smaller');
}
// Hide original <p>
$(elem).hide();
});
});
私が得ているエラーは次のとおりです、そしてあなたがテキストで見るものは実際の引用です:
Uncaught Error: Syntax error, unrecognized expression: "In the decade or so, science has discovered a tremendous amount about the role emotions play in our lives. Researchers have found that even more than IQ, your emotional awareness and abilities to handle feelings, will determine your success and happiness in all walks of life, including family relationships". – John Gottman, Ph. D.
これを引き起こしている原因とそれを修正する方法についてのアイデアはありますか?しばらくの間それを噛んでいたが成功しなかった。
更新:同じエラーを示すJsfiddle: http: //jsfiddle.net/Uugbc/