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> 

あなたが例からわかるように、私は連続して2つの以上li.fooの要素があるli.foo DOM要素（の「実行」をラップします。

私はわからないんだけど最高/最も効率的なのjQueryを経由して、これを達成するための方法（またはそのことについては単なるジャバスクリプト）

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を有する場合、それの後に、すべての次.foo要素をつかみますnextUntil()^(docs)メソッドを使用して、andSelf()^(docs)メソッドを使用してオリジナルを含めてから、wrapAll()^(docs)メソッドを使用してラップします。

---

更新：以前.foo()があるとき、それはnextUntil()^(docs)方法を避けるためこれは、もう少し効率的になります。

例：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>'); 
}); 

Answer 2

使用このような何か：。recuする

$(li).each(function(){ 
if($(this).next().hasClass('foo')){ 
---- Recursively check until the end of the run has been found ---- 
} 
}); 

ランの終了が見つかるまで、次の要素をチェックする関数を書いてください。

Answer 3

ない、これはパフォーマンスのためにどのように動作するかよく確認してください：

var $foo = $('.foo + .foo'); 
$foo.add($foo.prev()); 

$ fooが

編集に ".foo実行" のセットになります追加：

私は簡単な方法を考えた：

var $foo = $('.foo + .foo').prev('.foo').andSelf(); 

Answer 4

作業例：後世のためにhttp://jsfiddle.net/v8GY8/

：

// Takes a jQuery collection and returns an array of arrays of contiguous elems 
function groupContiguousElements($elems){ 
    var groups = []; 
    var current, lastElement; 
    $elems.each(function(){ 
    if ($(this).prev()[0] == lastElement){ 
     if (!current) groups.push(current=[lastElement]); 
     current.push(this); 
    }else{ 
     current = null; 
    } 
    lastElement = this; 
    }); 
    return groups; 
} 

var groups = groupContiguousElements($('li.foo')); 
$.each(groups, function(){ 
    var wrapper = $('<ol>').insertBefore(this[0]); 
    $.each(this,function(){ 
    wrapper.append(this); 
    }); 
});