3 
<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" />');

也没有用。

4

4 回答 4

3

试试这个：您可以使用wrapInner将 div 包裹在 div 的内容周围bodytext，然后从包裹的 div 中取出datumspan。

$(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跨度上。在这里你可以使用: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>

于 2015-12-10T12:04:18.127 回答
0

尝试：

$('.bodytext').find('*').not('span').wrap('<div class="someClass" />')
于 2015-12-10T12:10:52.193 回答
0

您的逻辑是错误的，因为代码将 div 元素附加到具有类“基准”的元素之后，直到<p>元素开始。但是在带有 class="bodytext" 的 div 中，您没有<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，但附加操作的顺序是正确的。

于 2015-12-10T12:24:49.680 回答
0

这是一种比任何完整的 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 中的属性

    希望这对你有用。

于 2015-12-10T12:28:57.447 回答