jQuery로 n 번째 문자를 모방합니다.

Question

CSS (현재)에는 nth-letter psuedo-selector가 없습니다. span 태그를 사용하지 않고이 선택기를 jQuery로 모방하는 방법이 있습니까?

도움을 주시면 큰 도움이됩니다.

Answer 1

문자가 sort 태그 (span, em, div 또는 그 중 ...)로 감싸지 않는 한, 문자는 DOM 요소가 아닙니다. 따라서 CSS 나 DOM 조작 함수로 직접 대상을 지정할 수는 없습니다.

Answer 2

jQuery는 DOM 요소를 추출하기위한 쿼리 언어이기 때문에 jQuery를 사용하여 특정 문자를 추출 할 수 없습니다. 텍스트 노드를 분할하고 특정 문자를 실제로 대상으로하는 새로운 DOM 요소 (예 : 범위 포함)를 만들어야합니다. 그러나, "스팬의 무리없이"그것은 불가능합니다.

내 시도가 비슷합니다. 나는이 생산 품질을 정말로 고려하지 않고 그것과 관련된 몇 가지 버그가있을 것이라고 말해야한다. 대신에 주로 문자열 조작을 사용하여이 문제에 접근하는 방법에 대한 아이디어를 줄 수 있기를 바랍니다.

다시 말하지만, 시작하기에 앞서 빠르고 간단합니다.

function colorizeNthLetter(text, letter) { 
    var words = text.split(' '); 
    for (var i = 0; i < words.length; i++) { 
     if (words[i].length > letter) { 
      words[i] = words[i].substring(0, letter-1) + 
         "<span class='color'>" + 
         words[i].substring(letter-1, letter) + 
         "</span>" + 
         words[i].substring(letter); 
     } 
    } 
    return words.join(" "); 
} 

http://jsfiddle.net/sQ98n/

한 가능성이 버그는 단어를 결정하는 공간이 분할 가능성이 단어 분리에 대해 생각의 불완전한 방법입니다. 더 많이있을 것입니다. :)