我有多行具有交替标记的内容。
<div class="tabs-services">
<div class="et_pb_tab_content">
<img src="image_url" />
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
<img src="image_url" />
<img src="image_url" />
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
</div>
</div>
我想将每个h1及其直接兄弟包装到div class =“ wrap”中
因此，输出应如下所示（我想排除img元素）：
<div class="tabs-services">
<div class="et_pb_tab_content">
<img src="image_url" />
<div class="wrap">
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
</div>
<div class="wrap">
<h1>2 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
</div>
<img src="image_url" />
<img src="image_url" />
<div class="wrap">
<h1>3 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
</div>
</div>
</div>
到目前为止，我尝试过的代码无法正常运行：
$(".tabs-services .et_pb_tab_content h1").each(function() {
$(this).nextUntil("h1").wrap("<div class='a'></div");
});
任何帮助表示赞赏。谢谢
wrapAll()在每个分组上使用。wrap()将分别包装集合中的每个元素
$(".tabs-services .et_pb_tab_content h1").each(function() {
$(this).next().add(this).wrapAll("<div class='a'></div");
});.a { border: 2px solid #ccc; margin:1em}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-services">
<div class="et_pb_tab_content">
<img src="image_url" />
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
<img src="image_url" />
<img src="image_url" />
<h1>1 Walkthrough</h1>
<p>Lorem ipsum <a href="#">Click Here!</a></p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句