web-dev-qa-db-fra.com

Trouvez tous les éléments basés sur les identifiants en utilisant regex sur le sélecteur jQuery

J'ai plusieurs éléments avec des identifiants uniques comme ceci:

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

J'espérais que ce qui suit fonctionnerait avec jQuery:

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

Je n’ai pas une bonne compréhension des expressions régulières et j’apprécierais certaines informations, car ce qui précède semble incorrect.

jqueryregexjquery-selectors
23
Steven Cheng

() Que vous faisiez avec regex, l'expression serait simplement:

item-\d-top

Où \d indique un seul chiffre (0..9) et où les autres caractères n'ont aucune signification particulière (ils sont donc traités comme des littéraux).

Cependant, jQuery ne dispose pas actuellement de filtre regex (seulement les choses telles que début/fin/contient/etc) - vous devrez donc créer votre propre filtre (ce qui est possible, mais si vous envisagiez cela, vous devriez vous arrêter et envisager ce/pourquoi vous filtrez et déterminez s’il existe une meilleure solution en premier).

Il serait beaucoup plus simple de créer une classe (comme serg555 suggère), puisque c’est exactement comme cela que vous traitez ces éléments.

Ou (si vous ne pouvez pas modifier le balisage pour ajouter la classe), utilisez les filtres existants, en développant la réponse de g.d.d.c , je pourrais le faire:

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

(Étant donné que vous pouvez avoir plusieurs éléments se terminant par 'top', maintenant ou à l'avenir, vous devez être plus précis pour éviter de cacher par inadvertance d'autres choses.)

37
Peter Boughton

Si l'ID était quelque chose comme news-top-1, news-top-2, news-top-3, news-top-4 etc., les sélecteurs vous auraient aidé.

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

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

Je leur assignerais une classe comme item et ferais ensuite une recherche par cette classe $(".item"). 

8
serg

James Padolsey a créé un merveilleux filter qui permet d’utiliser regex pour la sélection.

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

Maintenant vous pouvez utiliser 

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

Hit un problème similaire et aimé/upvoted la réponse de serg de créer la classe à la place, mais parce que je faisais plusieurs opérations sur de tels éléments, Keyed Collections étaient plus appropriés.

0
harshvchawla