特定の配列に含まれるdata属性の値が少なくとも1つの要素を選択してください

Question

私は、データ属性に特定の値を持つ要素を選択する必要があるフィルタリング関数を作成しています。値は私の例ではそれを説明することができ、アレイに含まれる：

例えば次のように、私は三つの要素とボタンを有する：

<div data-foo="aa,cc,ff" ></div> 
<div data-foo="bb,cc,ff" ></div> 
<div data-foo="bb,dd,ee" ></div> 

<div class="button" data-boo="aa,ff" ></div> 

各要素におけるデータ-fooがカンマ含ま分離された値。ボタンをクリックすると、そのデータ属性から配列（のコードにmyArray）が作成されます。次に、そのmyArrayの値の少なくとも1つがdata-fooにある要素を選択する必要があります。最初のものは「AA」と「FF」の両方を有し、第2の要素が「FF」を持っているので、Select変数は、最初の2つの要素をターゲットにすることができますどのように

$(".button").click(function() { 

    // First I make an array from the button's data attribute 
    var myArray = $(this).data('boo').split(','); 


    // Select should be elements that their da-foo has at least one 
    // — of values in the array above 
    var Select = "?" 

}); 

：明確な説明は以下のコードを参照してください。

私は本当にそれを意味するようにしようとしました。十分明確でない場合は、私に知らせてください。もっと説明していただき、ありがとうございます。

Answer 1

あなたはAttribute Contains Selectorを使用することができます。

$(".button").click(function() { 
    // First I make an array from the button's data attribute 
    var myArray = $(this).data('boo').split(','); 

    // produces array of strings like '[data-foo*="aa"]' 
    var selectors = myArray.map(function(value) { 
     return '[data-foo*="' + value + '"]'; 
    }); 
    // searches by selectors joined by comma, returns all elements 
    // that satisfy at least one selector 
    var selectedElements = $(selectors.join(',')); 
}); 

Answer 2

はこのためにArray.prototype.someを使用することができます：

$(".button").click(function() { 
 

 
    // First I make an array from the button's data attribute 
 
    var myArray = $(this).data('boo').split(','); 
 

 

 
    // Select should be elements that their da-foo has at least one 
 
    // — of values in the array above 
 
    var Select = $("div[data-foo]"); //select all elements with data-foo 
 
    Select.each(function(index, element) { 
 
    var isInMyArray = $(element).data("foo").split(",").some(function(element) { 
 

 
    if (myArray.indexOf(element) != -1) 
 
     {return true;}//if true then element is in myArray 
 

 
    }); //using some here - if one value is found in array return true. 
 
    console.log(isInMyArray); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-foo="aa,cc,ff"></div> 
 
<div data-foo="bb,cc,ff"></div> 
 
<div data-foo="bb,dd,ee"></div> 
 

 
<div class="button" data-boo="aa,ff">test</div>