jQuery: ярлык для создания контейнера div после ключевого слова - PullRequest
0 голосов
/ 07 февраля 2011

Я создаю ярлык для темы блога, в котором я хочу создать контейнер div вокруг элементов после использования ключевого слова.Например, моя запись в блоге должна выглядеть так:

<div class="entry">

<p>First Paragraph</p>

<p>[box]</p>

<p>Second Paragraph</p>

<p>Third Paragraph</p>

</div> <!-- .entry -->

Я надеюсь, что с помощью некоторой магии jQuery это может превратиться в следующее:

<div class="entry">

<p>First Paragraph</p>

<div class="box">

<p>Second Paragraph</p>

<p>Third Paragraph</p>

</div> <!-- .box -->

</div> <!-- .entry -->

Еще одно правило: когда я создаюконтейнерная коробка, я знаю, что всегда буду генерировать ее до закрытия div.entry.Я надеюсь, что это ограничение облегчит написание правил для jQuery.Например, я никогда не буду хотеть, чтобы разметка выглядела так, когда содержимое проходит через контейнер div.box:

<!-- I will never mark it up this way -->

<div class="entry">

<p>First Paragraph</p>

<div class="box">

<p>Second Paragraph</p>

</div> <!-- .box -->

<p>Third paragraph</p>

</div> <!-- .entry -->

Ответы [ 4 ]

0 голосов
/ 08 февраля 2011

Спасибо всем за помощь!Это помогло мне также придумать другую стратегию, которая также работала для меня:

$('.entry p:contains([box])').each( function() {
    $(this).prevAll().wrapAll('<div class="lefty">');
});

$('.entry p:contains([box])').each( function() {
    $(this).nextAll().wrapAll('<div class="righty">');
});
$("p:contains([box])").remove();

Это создает два отдельных блока: 1. элементы, предшествующие [коробке], 2. элементы, идущие [коробке]

0 голосов
/ 07 февраля 2011

Это будет примерно так:

$("div.entry").append(
  $("<div>").addClass("box").append("p:contains([box])+*");
);
$("p:contains([box])").remove();
0 голосов
/ 07 февраля 2011

Смотрите пример следующего здесь.

Вы можете найти index() абзаца [box] и затем wrapAll() <p> после использования :gt(), чтобы получить все последующие параграфы:

var boxAt;

$('p').each(function(){
    var $t = $(this);
    if ($t.html() === '[box]') {
        boxAt = $t.index();
        $t.remove();
    }
});

$('p:gt(' + (boxAt - 1) + ')').wrapAll('<div class="box">');
0 голосов
/ 07 февраля 2011

Я думаю, что ваша лучшая ставка - это селектор jQuery: contains () .С его помощью вы можете делать такие вещи (примечание: он соответствует любому абзацу с [box] в его HTML и, возможно, вам нужно выйти за скобки):

$("p:contains('[box]')").wrap($('<div>').addClass('box'));

И, кстати.принятие ответов и доказательство того, что вы уже приложили усилия для решения своей проблемы, значительно увеличат вероятность получения полезного ответа.

...