<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" />');
也没用。
试试这个:你可以利用wrapInner在bodytext
div的内容周围包裹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>
编辑: - 因为OP希望过滤bodytext
containing儿童datum
跨度。在这里你可以使用:has选择器为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>
尝试:
$('.bodytext').find('*').not('span').wrap('<div class="someClass" />')
这是一种比任何完整的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>
你的逻辑是错误的,因为代码在具有类“datum”的元素之后追加div元素,直到<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,但是对于追加操作的顺序是正确的。