Seletor jQuery: Id termina com?

393

Existe um selectorque eu possa consultar elementos com um ID que termine com uma determinada string?

Digamos que eu tenha um elemento com um ID de ctl00$ContentBody$txtTitle. Como posso conseguir isso passando apenas txtTitle?

Josh Stodola
fonte
16
bom e velho ID de página mestra desconcertante!
Matthew Lock
11
Definir ClientIDMode=statica partir ASP.Net 4.0 em diante e se livrar deste :)
Murali Murugesan
11
ClientIDMode = static não funcionará para aqueles que tentam encontrar um elemento em um repetidor!
Stuart

Respostas:

629

Se você conhece o tipo de elemento, então: (por exemplo: substitua 'elemento' por 'div')

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

Se você não conhece o tipo de elemento:

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

Mais informações disponíveis


Mark Hurd
fonte
10
Eu procuraria terminar com '$ txtTitle'. Não é tanto de um risco com o 'txt' prefixo, mas se você seletor é 'NameTextBox', ele iria corresponder 'NameTextBox', 'FirstNameTextBox', LastNameTextBox', etc.
Mark
11
Um usuário anônimo apenas tentou editar o seguinte em. Adicionando-o como um comentário (como parece fazer sentido): Isso não fornece os elementos que terminam com id txtTitle. Aqui está docs: api.jquery.com/element-selector ..element selector é equivalente a getElementsByTagName. Não tem nada a ver com o id do elemento. Se você deseja acessar elementos que terminam com id, use esta sintaxe $ ("[id $ = 'txtTitle']") ou se você conhece o tipo do elemento ..eg div .. então use esta sintaxe $ ("div [id $ = 'txtTitle'] ")
Pekka
11
O link foi muito útil. Não é a página em si, mas ela se transformou em duas páginas adicionais, que eu precisava. Aprendi como capturar segmentos de um título, como se o ID aparecesse como "masterPage1_Control0_MyTableName_moreStuff" no View Source, eu poderia travar na minha tabela de <asp: Table ID = "MyTable" ... usando $ ("id * = MinhaTabela] "). Venha para pensar sobre isso, eu gosto de id $ melhor. Hmmm ...
Lukas
Este encontra o elemento document.getElementById("f:fTest:j_idt51:0:inpTest"). Isso não acontece $("[id$='inpTest']"). É porque dois pontos não são permitidos no ID (mas o JSF adiciona!)?
Panu Haaramo
Existe uma maneira de usar esse seletor com CSS, como pseudo-seletores?
Alejandro Nava
250

A resposta para a pergunta é $("[id$='txtTitle']"), como Mark Hurd respondeu , mas para quem, como eu, deseja encontrar todos os elementos com um ID que comece com uma determinada string (por exemplo, txtTitle), tente o seguinte ( doc ):

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

Se você deseja selecionar elementos cujo id contém uma determinada string ( doc ):

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

Se você deseja selecionar elementos cujo ID não é uma determinada string ( doc ):

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

(também corresponde aos elementos que não têm o atributo especificado)

Se você deseja selecionar elementos cujo ID contém uma determinada palavra, delimitada por espaços ( doc ):

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

Se você deseja selecionar elementos cujo id é igual a uma determinada string ou começa com essa string seguida por um hífen ( doc ):

$("[id|='myValue']")
Romain Guidoux
fonte
Se você adicionar o que realmente responde à pergunta, por exemplo, $ ("[id $ = 'txtTitle']") e colocá-lo em primeiro lugar na lista, eu votaria na sua resposta. Não posso, no momento, porque você não responder à pergunta
Alan Macdonald
2
@AlanMacdonald Não tenho certeza se é certo adicioná-lo. Respondi à pergunta muito tempo depois que uma resposta foi aceita, apenas para adicionar mais informações aos visitantes. Espero que as pessoas que votaram na minha resposta também votaram na resposta à pergunta.
Romain Guidoux
11
@RomainGuidoux justo o suficiente, a decisão é sua, mas eu não voto positivo que não ofereça uma solução para a pergunta, porque não é óbvio para iniciantes que enfrentam o mesmo problema do OP se eles acessarem a página e houver um resposta votada que nem sequer responde à pergunta. Se você o alterasse para responder à pergunta, eu votaria sua resposta em vez da resposta aceita, pois é uma resposta mais completa e útil. Éter que deveria ter sido um comentário sobre a resposta aceita e não uma resposta à pergunta.
Alan Macdonald
11
@ Alan Alan Feito, você me convenceu.
Romain Guidoux
33

Tentar

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

editar: 4 segundos atrasado: P

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

Não é estritamente necessário citar o fragmento de texto com o qual você está correspondendo

Scott Evernden
fonte
2
Esta deve ser a resposta certa! Usando "e" só é confuso.
Kees C. Bakker
13

É mais seguro adicionar o sublinhado ou $ ao termo que você está procurando, por isso é menos provável que corresponda a outros elementos que terminam no mesmo ID:

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

(onde elemento é o tipo de elemento que você está tentando encontrar - por exemplo div, inputetc.

(Observe que você está sugerindo que seus IDs tendem a ter sinais $, mas acho que o .NET 2 agora tende a usar sublinhados no ID; portanto, meu exemplo usa um sublinhado).

Nick Gilbert
fonte
11
Sim você está certo. A propriedade ID usa sublinhado. A propriedade Name usa cifrão.
21139 Josh Stodola
3

Um exemplo: para selecionar todos os <a>s com ID que termina em _edit:

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

ou

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

Como esse é o ASP.NET, você pode simplesmente usar a tag ASP <% =%> para imprimir o ClientID gerado do txtTitle:

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

Isso resultará em ...

$('ctl00$ContentBody$txtTitle')

... quando a página é renderizada.

Nota: No Visual Studio, o Intellisense gritará com você por colocar tags ASP em JavaScript. Você pode ignorar isso, pois o resultado é JavaScript válido.

Michael
fonte
4
O OP não tem 'ctl00$ContentBody$txtTitle', ele tem 'txtTitle', e você está perdendo o líder #para corresponder a um ID. Mas o OP já rejeitou uma sugestão semelhante (desde que excluída): Isso não funcionará, a menos que eu coloque meu Javascript diretamente na marcação, que é um pesadelo organizacional. A separação comportamental é crucial para este projeto.
Martijn Pieters
1

Tente o seguinte:

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

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

Para encontrar um ID de iframe que termina com "iFrame" em uma página que contém muitos iframes.

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

                     }                   
                  });     
         });
neelmeg
fonte