Jak zawinąć rozpiętość wokół ostatniego słowa wewnętrznego tekstu elementu, używając jQuery?

Question

Wiem, że to powinno być proste zadanie, ale mam problemy z wyborem ostatniego elementu nagłówka i zawijanie go w przęsło, aby móc dodawać zmiany stylu.

Oto co mam tak daleko

$('.side-c h3').split(/\s+/).pop().wrap('<span />'); 

Każda pomoc będzie mile widziana

Answer 1

Problemem jest to, że jQuery obiektów węzłów okład DOM. Każde słowo w elemencie nie jest samym węzłem DOM, więc będziesz potrzebował trochę więcej pracy, aby rozdzielić tekst i dołączyć do niego. Musisz również uwzględnić wiele węzłów wybranych przez jQuery. Wypróbuj to:

$('.side-c h3').each(function(index, element) { 
    var heading = $(element), word_array, last_word, first_part; 

    word_array = heading.html().split(/\s+/); // split on spaces 
    last_word = word_array.pop();    // pop the last word 
    first_part = word_array.join(' ');  // rejoin the first words together 

    heading.html([first_part, ' <span>', last_word, '</span>'].join('')); 
}); 

Answer 2

Hmm, nie jest to szczególnie łatwe. Najbardziej ortodoksyjny sposób to zrobić z DOMNode.splitText:

$('.side-c h3').each(function(){ 
    var oldNode = this.firstChild, 
     newNode = oldNode.splitText(oldNode.data.lastIndexOf(' ') + 1), // don't wrap the space 
     span = document.createElement('span'); 

    this.replaceChild(span, newNode); 
    span.appendChild(newNode); 
}); 

See jsfiddle.

Answer 3

To prawda:

$('.side-c h3').each(function(){ 
    var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/); 
    var lastWord = words.pop(); 
    words.push('<span>' + lastWord + '</span>'); 
    $this.html(words.join(' ')); 
});