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

Question

Есть ли способ в 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? Не следует выбирать город с «Новым Лондоном».

Answer 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, который соответствует регулярному выражению (^|,\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>

Answer 2

попробуйте что-то вроде:

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

Attribute Contains Selector ^{[документы]}

Пример jsfiddle