Jak wybrać elementy z jQuery, które mają pewną wartość w tablicy atrybutów danych

Question

Czy istnieje sposób w jQuery do wybierania elementów, które mają określoną wartość w tablicy atrybutów danych?

Rozważmy następujący fragment 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> 

Jaki jest najlepszy sposób w jQuery aby wybrać wszystkie osoby z „New York” w danych-city atrybutu?

Roztwór powinien wziąć w uwagę, że niektóre citynames pojawiają się w innych nazw miast (w przykładzie 2: London, New London)

Przykład 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> 

Jaki jest najlepszy sposób, w jQuery wybierz wszystkie osoby z "London" w atrybucie data-city? Miasta z "Nowym Londynem" nie należy wybierać.

Answer 1

Można użyć selektora tag[attr*=string] gdzie *= pasuje ciąg nigdzie wartości znacznika. Mam kolorowe czerwony tekst, tak więc można przetestować ...

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

Albo poprzez bardziej złożony sposób, aby dopasować potrzeby przykład dwa:

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

Ta metoda wykorzystuje filtr, aby przejść przez listę wybranych li i dopasować wszystkie elementy z atrybutem data-city że pasuje do wyrażenia regularnego (^|,\s+)London(,|$) co oznacza ...

• początek lub przecinek (^|,)
• oraz jeden lub więcej obszarów (\s+)
• następnie London
• po przecinku lub na końcu (,|$)

użyłem tego 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> 

Answer 2

spróbować czegoś takiego:

$('li[data-city*="New York"]') 

Attribute Contains Selector^[docs]

jsfiddle example