javascript - 使用jquery,从更大的兄弟组中提取每组相邻的兄弟,匹配选择器
问题描述
我有以下标记:
<div id="parent">
<div class="special child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="special child"></div>
<div class="special child"></div>
<div class="special child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
我需要做的是提取 2 个子集合div.special
(对于 2 组相邻的兄弟姐妹),然后用另一个父级包装每个组,最终得到:
<div id="parent">
<div class="special_parent">
<div class="special child"></div>
</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="special_parent">
<div class="special child"></div>
<div class="special child"></div>
<div class="special child"></div>
</div>
<div class="child"></div>
<div class="child"></div>
</div>
我可以从迭代兄弟元素开始并做一些繁重的工作,但我相信应该有一个更优雅的方法。
解决方案
$('.special').each(function() {
if ($(this).parent().hasClass('special_parent')) return
$(this)
.nextUntil(':not(.special)')
.add(this)
.wrapAll('<div class="special_parent">')
})
.special_parent {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div class="special child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="special child">5</div>
<div class="special child">6</div>
<div class="special child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="special child">10</div>
<div class="special child">11</div>
</div>
推荐阅读
- java - 即使在项目中检测到错误,eclipse有没有办法运行Java程序?
- c# - ASP.NET 我无法让模型将数据带回控制器。它始终为 0
- excel - VBA 的问题 - 复制模板工作表并使用输入框重命名
- python - XML到Python中的字典到DataFrame
- vba - 如何将数字日期转换为字符日期,月份名称位于表单的不同字段中?(使用权)
- qt - Qt5 Openvino opencv cmake windows
- javascript - 使用日期时间字段填充 chartjs ajax
- ios - URLImage 永远不会在 SwiftUI 的小部件应用中加载图像
- excel - Excel VBA:将每个工作表名称更改为每个工作表中的单元格 A1 值
- kubernetes - 每次关闭并重新启动终端时,都要从 Homebrew 重新安装 Homebrew 和软件