Оберните весь HTML-код после <span class = "xy"> до следующего вхождения </ p> с помощью jQuery

Question

<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

Должно быть после jQuery:

<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass">Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!</div>
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass">Maybe also only some text.</div>
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass"><a href="path/to/link" title="some title" class="download">Only with link</a></div>
</p>

Так что весь HTML-код после </span> должны быть завернуты в div до следующего появления </p>

Что я пробовал:

$(".datum").each(function (index) {
        $(this).nextUntil("p").andSelf().wrapAll("<div class='someClass' />");
    });

или же:

$(".datum").nextUntil("p").wrap('<div class="someClass" />');

Не сработало... Есть предложения? Заранее спасибо!

Answer 1

Попробуйте это: вы можете использовать wrapInner, чтобы обернуть div вокруг содержимого bodytext Div, а затем вынуть datum span от завернутого div.

$(function(){
    $('p.bodytext').each(function(){
    
      $(this).wrapInner( "<div class='someClass'></div>");
      $(this).prepend($(this).find('div.someClass').find('span.datum'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

РЕДАКТИРОВАТЬ: - Как ОП хочет поставить фильтр на bodytext содержащий ребенка datum пяди. Здесь вы можете использовать : имеет селектор для bodytext, Также вы можете использовать методы : contains или .has () jQuery.

$(function(){
    $('p.bodytext:has(span.datum)').each(function(){
    
      $(this).wrapInner( "<div class='someClass'></div>");
      $(this).prepend($(this).find('div.someClass').find('span.datum'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span>19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

Answer 2

Ваша логика неверна, потому что код добавляет элемент div после элемента с классом "datum" до <p> Элемент это начало. Но в div с class="bodytext" у вас нет <p> элемент.

Попробуй это;

$(".bodytext").each(){
    $(this).after($(".datum")).wrapAll("<div class='someClass'>Some text <a href='path/to/link' title='some title' class='download'>Some text</a>. Again some text!</div>");
}

Я не уверен насчет wrapAll, но для операции добавления верно порядок.

Answer 3

Пытаться:

$('.bodytext').find('*').not('span').wrap('<div class="someClass" />')

Answer 4

Вот подход, который быстрее, чем любое полное решение jQuery.

Он затрагивает первый элемент, удаляет его и воссоздает содержимое с оставшимся содержимым.

Вот что я имею в виду:

$(function(){
  
 $('.bodytext').each(function(){
  var first = this.children[0];
  this.removeChild(first);
  this.innerHTML = first.outerHTML + '<div class="someclass">' + this.innerHTML + '</div>';
 });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

outerHTML Свойство содержит весь HTML-код ввода, в том числе:

• name
• id
• class
• data-*
• on<event>

• ... любой атрибут прямо в HTML

  Надеюсь, что это работает для вас.