Найти все элементы на основе ids с помощью regex в селекторе jQuery

У меня есть несколько элементов с уникальными идентификаторами вроде:

<div id='item-1-top'></div>
<div id='item-2-top'></div>
<div id='item-3-top'></div>

Я надеялся, что следующее будет работать с использованием jQuery:

$("#item-[.]+-top").each(function() {
  $(this).hide();
});

У меня нет хорошего понимания регулярных выражений, и я был бы признателен за некоторый ввод, так как приведенное выше неверно.

Ответ 1

Если вы делали это с регулярным выражением, выражение было бы просто:

item-\d-top

Где \d указывает любую цифру (0..9), а другие символы не имеют специального значения (поэтому рассматриваются как литералы).

Однако jQuery в настоящее время не имеет фильтра регулярных выражений (только такие, как start/end/contains/etc), поэтому вам нужно будет создать свой собственный (что возможно, но если вы считаете, что вам стоит остановиться и подумайте, что/почему вы фильтруете и выясняете, есть ли лучший способ в первую очередь).

Намного проще было бы создать класс (как предлагает serg555), так как именно так вы относитесь к этим элементам.

Или (если вы не можете изменить разметку для добавления класса), используйте существующие фильтры, расширяя ответ gddc, я мог бы сделать:

$('div[id^=item-][id$=-top]').hide()

(Так как у вас может быть несколько элементов, заканчивающихся только "сверху", либо сейчас, либо в будущем, поэтому вам нужно быть более конкретным, чтобы избежать непреднамеренного скрытия других вещей.)

Ответ 2

Если идентификатор был чем-то вроде news-top-1, news-top-2, news-top-3, news-top-4 и т.д., то селектора помогли бы вам.

http://api.jquery.com/attribute-starts-with-selector/

$.each( $("input[name^='news-top-']"), function () {
  alert( $(this).hide() );
});

Ответ 3

Я бы присвоил им некоторый класс вроде item, а затем выполнил поиск этого класса $(".item").

Ответ 4

Джеймс Падольси создал замечательный фильтр, который позволяет использовать regex для выбора.

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

Теперь вы можете использовать

$('div:regex(id,item-[0-9]-top)').hide()

Ответ 5

Ударьте аналогичную проблему и любимый/поддержанный serg ответ на создание класса, а затем, потому что я делал несколько операций над такими элементами, Keyed Collections были более подходящими.