Znajdź wszystkie elementy w oparciu o identyfikatory przy użyciu regex na selektor jQuery

Question

Mam kilka elementów z unikalnymi identyfikatorami tak:

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

miałem nadzieję, że będzie działać po użyciu jQuery:

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

Nie mam dobrego zrozumienia wyrażeń regularnych i byłbym wdzięczny za pewne dane wejściowe, ponieważ powyższe wydaje się nieprawidłowe.

Answer 1

Jeśli robisz to z regex, wyrażenie byłoby po prostu:

item-\d-top 

Jeżeli \d oznacza dowolną cyfrę (0..9) i inne znaki nie mają specjalnego znaczenia (więc są traktowane jako literały).

Jednak jQuery nie ma obecnie filtru regex (tylko rzeczy takie jak start/end/contains/etc) - więc musiałbyś stworzyć swój własny (co jest możliwe, ale jeśli uważasz, że powinieneś zatrzymaj się i zastanów się, co/dlaczego filtrujesz i zastanów się, czy najpierw jest lepszy sposób).

Znacznie łatwiejsze byłoby stworzenie klasy (jak sugeruje serg555), ponieważ dokładnie tak traktujesz te przedmioty.

Albo (jeśli nie można zmienić znaczników, aby dodać klasę) następnie wykorzystać istniejące filtry, rozszerzając na g.d.d.c's answer, mogę zrobić:

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

(Ponieważ może mieć wiele elementów kończąc tuż „top”, ani teraz, ani w przyszłości, więc trzeba być bardziej szczegółowe, aby uniknąć niezamierzonego ukrywanie innych rzeczy).

Answer 2

Przypisałbym im jakąś klasę, np. item, a następnie przeszukuję według tej klasy $(".item").

Answer 3

Jeśli identyfikator został coś news-top-1, news-top-2, news-top-3, news-top-4 itp następnie selektory pomogłaby ty.

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

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

Answer 4

James Padolsey stworzył wspaniałe filter który pozwala regex mają być stosowane do wyboru.

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)); 
} 

Teraz można użyć

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

Answer 5

Hit podobny problem i lubiany/odpowiedź upvoted serg za tworzyć klasę zamiast ale ponieważ robiłem wiele operacji na takich elementach, Keyed Collections były bardziej odpowiednie.