如何使用jQuery检测DOM元素的运行情况是最好的呢?
例如,如果我有以下项目列表:
<ol>
<li class="a"></li>
<li class="foo"></li>
<li class="a"></li>
<li class="a"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="a"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
</ol>
假设我想要获取所有的 li.foo
元素,并将它们封装在自己的 <ol>
块(或任何其他包装器)中,以达到如下所示的效果。
<ol>
<li class="a"></li>
<li class="foo"></li>
<li class="a"></li>
<li class="a"></li>
<li><ol>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
</ol></li>
<li class="a"></li>
<li><ol>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
</ol></li>
</ol>
从例子中可以看出,我只想包装连续出现了2个或更多的li.foo
dom元素。
我不确定用jQuery(或者纯javascript)实现这个功能最好/最有效的方式是什么。