8

データ属性配列に特定の値を持つ要素を選択するjQueryの方法はありますか?

次の html のスニペットを検討してください。

<li id="person1" data-city="Boston, New York, San Fransisco">
    Person name 1
</li>
<li id="person2" data-city="Los Angeles, New York, Washington">
    Person name 2
</li>

data-city属性に「New York」を持つすべての人を選択するjQueryの最良の方法は何ですか?

ソリューションでは、特定の都市名が他の都市名に含まれていることを考慮する必要があります (例 2: London、New London)

例 2:

<li id="person1" data-city="Boston, London, San Fransisco">
    Person name 1
</li>
<li id="person2" data-city="Los Angeles, Washington, New London">
    Person name 2
</li>

data-city属性に「London」を持つすべての人を選択するjQueryの最良の方法は何ですか? 「New London」のある都市は選択しないでください。

4

2 に答える 2

36

tag[attr*=string]タグ値の任意の場所にある文字列に*=一致するセレクターを使用できます。テストできるように、テキストを赤くしました...

$("li[data-city*=New York]").css({color:'red'});

または、例 2 のニーズに合わせてより複雑な方法を使用します。

$("li")
    .filter( function(){ 
            return $(this).attr('data-city').match(/(^|,\s+)London(,|$)/) 
        })
    .css({color:'red'});

このメソッドは、フィルターを使用して、選択したリストを調べ、正規表現に一致liする属性を持つすべての要素に一致させます。つまり...data-city(^|,\s+)London(,|$)

  • 開始またはコンマ ( ^|,)
  • および 1 つ以上のスペース ( \s+)
  • に続くLondon
  • その後にコンマまたは終了 ( ,|$)

私はこのHTMLを使用しました：

<li id="person1" data-city="Boston, New York, San Fransisco, London">
    Person name 1
</li>
<li id="person2" data-city="Boston, New Jersey, London, San Fransisco">
    Person name 2
</li>
<li id="person3" data-city="Los Angeles, New York, New London, Washington">
    Person name 3
</li>
于 2011-09-08T07:14:57.177 に答える