jQuery Selector: Id se termine par?

393

Existe-t-il un selectorélément que je peux rechercher pour les éléments dont l'ID se termine par une chaîne donnée?

Disons que j'ai un élément avec un identifiant de ctl00$ContentBody$txtTitle. Comment puis-je obtenir cela en passant juste txtTitle?

Josh Stodola
la source
16
bon vieux ID de page maître malmené!
Matthew Lock,
1
Définissez à ClientIDMode=staticpartir d'ASP.Net 4.0 et débarrassez-vous de cela :)
Murali Murugesan
1
ClientIDMode = statique ne fonctionnera pas pour ceux qui essaient de trouver un élément dans un répéteur!
Stuart

Réponses:

629

Si vous connaissez le type d'élément, alors: (ex: remplacez 'element' par 'div')

$("element[id$='txtTitle']")

Si vous ne connaissez pas le type d'élément:

$("[id$='txtTitle']")

Plus d'informations disponibles


Mark Hurd
la source
10
Je le chercherais se terminant par '$ txtTitle'. Ce n'est pas autant un risque avec le préfixe 'txt', mais si votre sélecteur est 'NameTextBox', il correspondrait à 'NameTextBox', 'FirstNameTextBox', LastNameTextBox ', etc.
Mark
11
Un utilisateur anonyme vient d'essayer de modifier ce qui suit dans. Ajouter en tant que commentaire (comme cela semble logique): Cela ne donne pas les éléments se terminant par id txtTitle. Voici les documents: api.jquery.com/element-selector ..element selector est équivalent à getElementsByTagName. Cela n'a rien à voir avec l'id de l'élément. Si vous souhaitez accéder aux éléments se terminant par id, utilisez cette syntaxe $ ("[id $ = 'txtTitle']") ou si vous connaissez le type de l'élément ..eg div .. puis utilisez cette syntaxe $ ("div [id $ = 'txtTitle'] ")
Pekka
1
Le lien était très utile. Pas la page elle-même, mais elle s'est transformée en 2 pages supplémentaires, dont j'avais besoin. J'ai appris à capturer des segments d'un titre, comme si l'ID apparaissait comme "masterPage1_Control0_MyTableName_moreStuff" dans View Source, je pouvais verrouiller ma table de <asp: Table ID = "MyTable" ... en utilisant $ ("id * = MyTable] "). À bien y penser, j'aime mieux id $. Hmmm ...
Lukas
Cela trouve l'élément document.getElementById("f:fTest:j_idt51:0:inpTest"). Ce n'est pas le cas $("[id$='inpTest']"). Est-ce parce que deux points n'est pas autorisé dans l'ID (mais JSF l'ajoute!)?
Panu Haaramo
Existe-t-il un moyen d'utiliser ce sélecteur avec CSS, comme les pseudo-sélecteurs?
Alejandro Nava
250

La réponse à la question est $("[id$='txtTitle']"), comme l'a répondu Mark Hurd , mais pour ceux qui, comme moi, veulent trouver tous les éléments avec un identifiant qui commence par une chaîne donnée (par exemple txtTitle), essayez ceci ( doc ):

$("[id^='txtTitle']")

Si vous souhaitez sélectionner des éléments dont l'id contient une chaîne donnée ( doc ):

$("[id*='txtTitle']")

Si vous souhaitez sélectionner des éléments dont l'id n'est pas une chaîne donnée ( doc ):

$("[id!='myValue']")

(il correspond également aux éléments qui n'ont pas l'attribut spécifié)

Si vous souhaitez sélectionner des éléments dont l'id contient un mot donné, délimité par des espaces ( doc ):

$("[id~='myValue']")

Si vous souhaitez sélectionner des éléments dont l'id est égal à une chaîne donnée ou en commençant par cette chaîne suivie d'un trait d'union ( doc ):

$("[id|='myValue']")
Romain Guidoux
la source
Si vous ajoutez celui qui répond réellement à la question, c'est-à-dire $ ("[id $ = 'txtTitle']") et que vous le mettez en premier dans la liste, je voterai votre réponse. Je ne peux pas pour le moment car vous ne répondez pas à la question
Alan Macdonald
2
@AlanMacdonald Je ne suis pas sûr qu'il soit juste de l'ajouter. J'ai répondu à la question longtemps après qu'une réponse a été acceptée, juste pour ajouter plus d'informations aux visiteurs. J'espère que les personnes qui ont voté pour ma réponse ont également voté pour la réponse à la question.
Romain Guidoux
1
@RomainGuidoux c'est juste votre appel, mais je ne vote pas les réponses qui n'offrent pas de solution à la question posée, car ce n'est pas évident pour les débutants rencontrant le même problème que l'OP s'ils viennent sur la page et qu'il y a un up réponse votée qui ne répond même pas à la question. Si vous l'avez modifié pour répondre à la question, je voterais pour votre réponse au lieu de la réponse acceptée car c'est une réponse plus complète et plus utile. Ether ou cela aurait dû être un commentaire sur la réponse acceptée plutôt qu'une réponse à la question.
Alan Macdonald
1
@AlanMacdonald Terminé, vous m'avez convaincu.
Romain Guidoux
33

Essayer

$("element[id$='txtTitle']");

montage: 4 secondes de retard: P

kkyy
la source
32
$('element[id$=txtTitle]')

Il n'est pas strictement nécessaire de citer le fragment de texte auquel vous correspondez

Scott Evernden
la source
2
Cela devrait être la bonne réponse! Utiliser "et 'n'est que déroutant.
Kees C. Bakker
13

Il est plus sûr d'ajouter le trait de soulignement ou $ au terme que vous recherchez, il est donc moins probable qu'il corresponde à d'autres éléments se terminant par le même ID:

$("element[id$=_txtTitle]")

(où élément est le type d'élément que vous essayez de trouver - par exemple div, inputetc.

(Remarque, vous suggérez que vos identifiants contiennent généralement des signes $, mais je pense que .NET 2 a désormais tendance à utiliser des traits de soulignement dans l'ID à la place, donc mon exemple utilise un trait de soulignement).

Nick Gilbert
la source
1
Oui, tu as raison. La propriété ID utilise le soulignement. La propriété de nom utilise le signe dollar.
Josh Stodola
3

Un exemple: pour sélectionner tous les <a>s dont l'ID se termine par _edit:

jQuery("a[id$=_edit]")

ou

jQuery("a[id$='_edit']")
Anton K
la source
3

Comme il s'agit d'ASP.NET, vous pouvez simplement utiliser la balise ASP <% =%> pour imprimer l'ID client généré de txtTitle:

$('<%= txtTitle.ClientID %>')

Cela se traduira par ...

$('ctl00$ContentBody$txtTitle')

... lorsque la page est rendue.

Remarque: Dans Visual Studio, Intellisense vous crie après avoir mis des balises ASP en JavaScript. Vous pouvez ignorer cela car le résultat est un code JavaScript valide.

Michael
la source
4
L'OP n'en a pas 'ctl00$ContentBody$txtTitle', il en a 'txtTitle', et il vous manque le premier mot #pour correspondre à un identifiant. Mais l'OP a déjà rejeté une suggestion similaire (supprimée depuis): cela ne fonctionnera pas si je ne mets pas mon Javascript directement dans le balisage, ce qui est un cauchemar organisationnel. La séparation comportementale est cruciale pour ce projet.
Martijn Pieters
1

Essaye ça:

<asp:HiddenField ID="0858674_h" Value="0" runat="server" />

var test = $(this).find('[id*="_h"').val();
pawel
la source
0

Afin de trouver un id iframe se terminant par "iFrame" dans une page contenant de nombreux iframes.

jQuery(document).ready(function (){     
                  jQuery("iframe").each(function(){                     
                    if( jQuery(this).attr('id').match(/_iFrame/) ) {
                            alert(jQuery(this).attr('id'));

                     }                   
                  });     
         });
neelmeg
la source