Cómo seleccionar elementos con jQuery que tienen un cierto valor en una matriz de atributos de datos

Question

¿existe alguna manera en jQuery para seleccionar elementos que tengan un cierto valor en una matriz de atributos de datos?

Considérese este fragmento de 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> 

¿Cuál es la mejor manera en jQuery para seleccionar todas las personas con "New York" en la ciudad de datos de atributos?

La solución debe tener en cuenta que ciertos citynames aparecen en otros nombres de ciudades (en el ejemplo 2: Londres, Nueva Londres)

Ejemplo 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> 

¿Cuál es la mejor manera en jQuery para seleccionar todas las personas con "Londres" en el atributo de ciudad de datos? Una ciudad con "New London" no debe ser seleccionada.

Answer 1

Puede utilizar el selector de tag[attr*=string] donde *= concuerda con la cadena se encuentran en cualquier parte del valor de la etiqueta. He de color rojo el texto, sólo para que pueda probar ...

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

O a través del método más complejo para satisfacer las necesidades de ejemplo dos:

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

Este método utiliza el filtro que pasar por la lista de li seleccionado y combinar todos los elementos con el atributo data-city que coincide con la expresión regular (^|,\s+)London(,|$) lo que significa ...

• inicio o coma (^|,)
• y uno o más espacios (\s+)
• seguidos de London
• seguidos por coma o punto y final (,|$)

que utiliza este código 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

intentar algo como:

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

Attribute Contains Selector^[docs]

jsfiddle example