在jQuery中检测DOM元素的"运行"

Question

在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>

从示例中可以看出,我只想包装li.foodom元素的"运行" (其中有两个或更多li.foo元素连续出现).

我不确定通过jQuery实现这一目标的最好/最有效的方法(或者只是普通的javascript).

Answer 1

示例： http: //jsfiddle.net/kNfxs/1/

$('ol .foo').each(function() {
    var $th = $(this);
    var nextUn = $th.nextUntil(':not(.foo)');
    if(!$th.prev('.foo').length && nextUn.length)
        nextUn.andSelf().wrapAll('<li><ol></ol></li>');
});

循环遍历.foo元素，如果前一个元素不是， 并且后面.foo至少有 1 个元素，则使用^{(docs)方法获取所有下一个元素，并使用(docs)}方法包含原始元素，然后使用^（文档）方法。.foo.foonextUntil()andSelf()wrapAll()

更新： 这会更有效一点，因为当存在先前nextUntil()^的.foo().

示例： http: //jsfiddle.net/kNfxs/2/

$('ol .foo').each(function() {
    var $th = $(this);
    if($th.prev('.foo').length) return; // return if we're not first in the group
    var nextUn = $th.nextUntil(':not(.foo)');
    if( nextUn.length)
        nextUn.andSelf().wrapAll('<li><ol></ol></li>');
});