Первый селектор слов для каждого <p>в пределах <div>

Question

Я ссылался на следующие вопросы и ответы: Первый селектор слов

Я хочу использовать тот же тип настройки <span></span>, однако я хотел бы, чтобы это происходило для каждогопервое слово каждого <p> в определенном <div>.Как я могу указать это?

    $(window).load(function(){
(function () { 
    var node = $("p").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.slice(0,text.indexOf(" "));

    if (!node.length)
        return;

    node[0].nodeValue = text.slice(first.length);
    node.before('<span>' + first + '</span>');
})();
  });

В таблице стилей я могу взять простой <span></span>, который был применен к различным селекторам, и указать, что функция 'span' будет делать с каждым селектором.

Answer 1

@ Joseph re: пример fiddle Разве не будет проще заменить?

$("#target p").each(function(){
  $(this).html($(this).text().replace(/^([^\s]+)\s?/, '<span>$1</span> '));
});

Answer 2

$(window).load(function(){
$("p").each(function(){

    var text = $(this).text() + " ";
    var newMarkup =
      "<span class='firstWord'>" + 
      text.substr(0,text.indexOf(" ")) +
      "</span>" + 
      text.substr(text.indexOf(" "));
    $(this).html(newMarkup);
});
  });

Вот ссылка на образец того, с чем я работаю: http://www.meestro.com/vespers

Answer 3

Редактировать

У Дакдада есть намного лучшее решение: Скрипка

@ Майкл Корнетт: не могли бы вы отметить Дакдада как ответ, пожалуйста?:)