複数の値を持つデータ属性の値を検索

Question

複数の値を持つデータ属性に問題があります。

私はステップのあるフォームを持っています。最初のステップではiがノードを有する：

<div id="step-0"> 
<input id="nd1" type="radio" name="ordernode" value="val1"> 
<input id="nd2" type="radio" name="ordernode" value="val2"> 
</div> 

ユーザが第1の値を設定した場合、（このIDに）data-node nd1と別のステップがclass activatedを有するであろう。

<div id="step-1" class="step" data-node="nd1"> 
Step 1 
</div> 
<div id="step-3" class="step" data-node="nd1"> 
Step 3 
</div> 

したがって、別のノードです。しかし、node 1とnode 2に属するステップがあります。私は同じ手順フォアnode 1とnode 2を作成したくない、と私はこのステップはnode 1とnode 2に属し

<div id="step-4" class="step" data-node="nd1,nd2"> 
    Step 4 
</div> 

ようdata-node属性2つの値に追加しようとする理由です。 jQueryのでdata-node属性の複数値なし

は、私はそれが罰金と高速に動作

var nodeActive = $(this).find('input').attr('id'); 
$(this).parents('.sof_body').find('[data-node="'+nodeActive+'"]').addClass('activated'); 

持って、私は何の問題もありません。しかし、複数の値を持つ私は、各ステップdata-node属性で検索する必要があり、この機能はまた、その呼び出し、別の機能を持つ多くの問題を引き起こすこと、最初よりも、動作しますが、遅く

var nodeActive = $(this).find('input').attr('id'); 
$(this).parents('.sof_body').find('.step').each(function(){ 
    var nodesBe = $(this).data('node'); 
    if (nodesBe.indexOf(''+nodeActive+'') >= 0){ 
     $(this).addClass('activated'); 
    } 
}); 

のように、文字列内のノードのIDを検索してみてくださいこの機能の後に。

私の質問は、each functionなしでそれを作るために、またはそれを速くするために、複数の値の検索機能を実現する別の方法はありますか？

Answer 1

あなたはAttribute Contains Selectorを使用し、完全一致で使用するためにターゲットを絞った要素を下にトリミングすることができ.filter()

var nodeActive = $(this).find('input').attr('id'); 
$(this).closest('.sof_body').find('.step[data-node*=' + nodeActive + ']').filter(function() { 
    return $(this).data('node').split(',').indexOf(nodeActive) > -1; 
}).addClass('activated');