Сложная манипуляция с JQuery DOM (перенос текста) - PullRequest
Новая
       8

Сложная манипуляция с JQuery DOM (перенос текста)

2 голосов
/ 23 июня 2011

У меня есть немного HTML как таковой: 

<span class="number">1.</span>Lorem ipsum dolor. <span class="special">Sit amet.</span> Consectur adipisicing elit. 
<span class="number">2.</span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Что я хочу это: 

<span class="point"><span class="number">1.</span><span class="text">Lorem ipsum dolor. <span class="bar">Sit amet.</span> Consectur adipisicing elit.</span></span>
<span class="point"><span class="number">2.</span><span class="text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></span>

По сути, каждый «числовой» промежуток указывает начало маркера, который выполняется либо до следующего «числового» промежутка, либо до конца HTML, если больше нет «числовых» промежутков. Внутри пунктов могут быть дополнительные теги HTML, а также обычный текст. Я хочу обернуть каждую точку маркера в промежуток, а также заключить текст в точку маркера в промежутке. К сожалению, похоже, это может быть боль.

Есть идеи, как мне это сделать с помощью jQuery (или даже какого-нибудь другого решения)?

Редактировать: понял. jQuery имеет функцию .nextUntil(), которая подходит здесь: http://api.jquery.com/nextUntil/ После этого обёртывание может быть сделано с помощью .wrap(): http://api.jquery.com/wrap/

Снова отредактируйте: на самом деле, я думаю, что функция .nextUntil() работает только с узлами тегов, а не с текстовыми узлами. (

1 Ответ

3 голосов
/ 23 июня 2011

Это работает ... 

var point = $('<span class="point" />');

$('body').contents().each(function() {

    var element = $(this);

    if (point.children().length > 0 && element.is('span.number')) {
        $('body').append(point);
        point = $('<span class="point" />');
    } 

    point.append(element);

})

$('body').append(point);

jsFiddle .

...