如何在 之后包装所有 HTML-代码直到下一次出现 ？

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- 之后的代码应该被包裹在 div 中，直到下一次出现 

我尝试了什么：

$(".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 的内容中，然后从包裹的 div.

中取出 datum span

$(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>

EDIT：- 因为 OP 想要在 bodytext 包含子 datum 跨度上放置过滤器。这里可以使用:has selector for bodytext. Also you can use :contains or .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

尝试：

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

Answer 3

你的逻辑是错误的，因为，代码在具有 class "datum" 的元素之后追加 div 元素，直到  元素开始。但是在 div 中 class="bodytext" 你没有  元素。

试试这个；

$(".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 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

希望这对你有用。

如何在 <span class="xy"> 之后包装所有 HTML-代码直到下一次出现 </p>？

How to wrap all HTML-Code after <span class="xy"> until next occurence of </p>?

html

javascript

jquery

wrapall

nextuntil