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>

因此</span>之后的所有HTML代码都应该包含在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的内容中，然后从包装的div中取出datum span。< / p>

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

编辑： - 由于OP希望对包含子bodytext范围的datum进行过滤。在这里，您可以使用bodytext选择器$(function(){ $('p.bodytext:has(span.datum)').each(function(){ $(this).wrapInner( "<div class='someClass'></div>"); $(this).prepend($(this).find('div.someClass').find('span.datum')); }); });。您也可以使用:has或:contains jQuery方法。

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

class UserInformation: NSObject {
var string: String
var double: Double
var image: String

init(string: String, double: Double, image: String) {
    self.string = string
    self.double = double
    self.image = image
    }
}

Answer 2

尝试：

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

Answer 3

你的逻辑是错误的，因为代码在具有类＆＃34; datum＆＃34;的元素之后追加div元素。直到<p>元素开始。但是在div中有class =＆＃34; bodytext＆＃34;你没有<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 4

这是一个比任何完整的jQuery解决方案都快的方法。

它会刷新第一个元素，将其删除并重新创建剩余内容的内容。

这就是我的意思：

＆＃13;

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

＆＃13;

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

＆＃13;

outerHTML属性包含输入的整个HTML，包括：

name
id
class
data-*
on<event>
...任何直接设置为HTML的属性

希望这适合你。

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

4 个答案: