javascript - 在 jQuery 中检测 "runs"的 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> block (或与此相关的任何包装器)以类似的方式结束。

<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.foo 的“运行” dom 元素(连续有 2 个或更多 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 个 .foo 在它之后，然后使用 nextUntil()^(docs) 获取所有下一个 .foo 元素方法并使用 andSelf()^(docs) 包含原件方法，然后使用 wrapAll()^(docs) 包装它们方法。

---

更新: 这会更有效一些，因为它避免了 nextUntil()^(docs)当有一个前一个 .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>');
});