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

标签 javascript jquery html wrapall nextuntil

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

也没用。

最佳答案

试试这个:您可以使用 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>

编辑:- 因为 OP 希望在包含子 datum 跨度的 bodytext 上放置过滤器。在这里你可以使用 :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>

关于javascript - 如何在 <span class ="xy"> 之后包装所有 HTML 代码,直到下一次出现 </p>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34201280/

相关文章:

javascript - 处理 keydown 事件中的某些键时遵循默认行为

javascript - 如何在 css 和/或 javascript 中制作老虎机文本效果?

javascript - 单击选项卡时如何阻止页面重新加载? (jQuery)

javascript - ExcelJS:处理 100+ MB 数据时 Javascript 堆内存不足

javascript - 根据 PHP Foreach 循环中的 select 显示更多输入

javascript 隐藏/显示下拉列表中的项目

javascript - 将具有相同属性的对象分组 - javascript

jquery - 如何将 anchor 标记添加到列表中的文本

javascript - 在 javascript 中检测屏幕上的虚拟键盘和横向

php - 使用 Bootstrap 创建带有 3 个图像的横幅标题