Как выбрать элементы с jQuery, которые имеют определенное значение в массиве атрибутов данных

Есть ли способ в 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>

Каков наилучший способ в jQuery выбрать всех людей с "Нью-Йорком" в атрибуте data-city?

В решении должно быть учтено, что некоторые городские имена появляются в других городах (в примере 2: Лондон, Нью-Лондон)

Пример 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>

Каков наилучший способ в jQuery выбрать всех людей с "Лондоном" в атрибуте data-city? Город с "Новым Лондоном" не следует выбирать.

Ответы

Ответ 1

Вы можете использовать селектор tag[attr*=string], где *= соответствует строке, найденной в любом месте значения тега. Я покрасил текст красным, просто чтобы вы могли проверить...

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

Или с помощью более сложного метода для удовлетворения потребностей примера два:

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

Этот метод использует фильтр для перехода по списку выбранных li и соответствует всем элементам с атрибутом data-city, который соответствует regex (^|,\s+)London(,|$), что означает...

  • начало или запятая (^|,)
  • и одно или несколько пробелов (\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>