jQuery Selector: ¿Id termina con?

393

¿Hay alguna selectorque pueda consultar para elementos con una ID que termina con una cadena dada?

Digamos que tengo un elemento con una identificación de ctl00$ContentBody$txtTitle. ¿Cómo puedo obtener esto pasando solo txtTitle?

Josh Stodola
fuente
16
¡buena vieja identificación de la página maestra!
Matthew Lock
1
Establecer ClientIDMode=staticdesde ASP.Net 4.0 en adelante y deshacerse de esto :)
Murali Murugesan
1
ClientIDMode = static no funcionará para aquellos que intentan encontrar un elemento en un repetidor.
Stuart

Respuestas:

629

Si conoce el tipo de elemento, entonces: (por ejemplo: reemplace 'elemento' con 'div')

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

Si no conoce el tipo de elemento:

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

Más información disponible.


Mark Hurd
fuente
10
Lo buscaría terminando con '$ txtTitle'. No es tan arriesgado con el prefijo 'txt', pero si su selector es 'NameTextBox', coincidiría con 'NameTextBox', 'FirstNameTextBox', LastNameTextBox ', etc.
Marque
11
Un usuario anónimo acaba de intentar editar lo siguiente. Agregándolo como un comentario (como parece tener sentido): Esto no le da a los elementos que terminan con id txtTitle. Aquí hay documentos: api.jquery.com/element-selector ..el selector de elementos es equivalente a getElementsByTagName. No tiene nada que ver con la identificación del elemento. Si desea acceder a elementos que terminan con id, use esta sintaxis $ ("[id $ = 'txtTitle']") o si conoce el tipo de elemento ..eg div .. luego use esta sintaxis $ ("div [id $ = 'txtTitle'] ")
Pekka
1
El enlace fue muy útil. No es la página en sí, pero se dividió en 2 páginas adicionales, que necesitaba. Aprendí a capturar segmentos de un título, por ejemplo, si la ID aparece como "masterPage1_Control0_MyTableName_moreStuff" en Ver código fuente, podría bloquear mi tabla de <asp: Table ID = "MyTable" ... usando $ ("id * = MyTable] "). Ahora que lo pienso, me gusta id $ mejor. Hmmm ...
Lukas
Esto encuentra el elemento document.getElementById("f:fTest:j_idt51:0:inpTest"). Esto no lo hace $("[id$='inpTest']"). ¿Es porque los dos puntos no están permitidos en la ID (pero JSF lo agrega)?
Panu Haaramo
¿Hay alguna manera de usar este selector con CSS, como pseudo-selectores?
Alejandro Nava
250

La respuesta a la pregunta es $("[id$='txtTitle']"), como Mark Hurd respondió , pero para aquellos que, como yo, quieren encontrar todos los elementos con una identificación que comience con una cadena dada (por ejemplo, txtTitle), intente esto ( doc ):

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

Si desea seleccionar elementos cuya identificación contiene una cadena dada ( doc ):

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

Si desea seleccionar elementos cuya identificación no es una cadena dada ( doc ):

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

(también coincide con los elementos que no tienen el atributo especificado)

Si desea seleccionar elementos cuya identificación contiene una palabra dada, delimitada por espacios ( doc ):

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

Si desea seleccionar elementos cuya identificación es igual a una cadena dada o comenzar con esa cadena seguida de un guión ( doc ):

$("[id|='myValue']")
Romain Guidoux
fuente
Si agrega el que realmente responde la pregunta, es decir, $ ("[id $ = 'txtTitle']") y lo coloca primero en la lista, votaría su respuesta. No puedo en este momento porque no respondes la pregunta
Alan Macdonald
2
@AlanMacdonald No estoy seguro de que sea correcto agregarlo. Respondí la pregunta mucho tiempo después de que se aceptara una respuesta, solo para agregar más información para los visitantes. Espero que las personas que votaron por mi respuesta también votaron por la respuesta a la pregunta.
Romain Guidoux
1
@RomainGuidoux es justamente su decisión, pero no voté por las respuestas que no ofrecen una solución a la pregunta formulada porque no es obvio para los novatos que experimentan el mismo problema que el OP si acuden a la página y hay un aumento Respuesta votada que ni siquiera responde la pregunta. Si lo cambiara para responder la pregunta, votaría su respuesta en lugar de la respuesta aceptada, ya que es una respuesta más completa y útil. Eter eso o debería haber sido un comentario sobre la respuesta aceptada en lugar de una respuesta a la pregunta.
Alan Macdonald
1
@AlanMacdonald Hecho, me convenciste.
Romain Guidoux
33

Tratar

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

editar: 4 segundos tarde: P

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

No es estrictamente necesario citar el fragmento de texto con el que se compara

Scott Evernden
fuente
2
¡Esta debería ser la respuesta correcta! Usar "y 'solo es confuso.
Kees C. Bakker
13

Es más seguro agregar el guión bajo o $ al término que está buscando, por lo que es menos probable que coincida con otros elementos que terminan en la misma ID:

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

(donde elemento es el tipo de elemento que está tratando de encontrar, por ejemplo div, inputetc.

(Tenga en cuenta que está sugiriendo que sus ID tienden a tener signos $ en ellos, pero creo que .NET 2 ahora tiende a usar guiones bajos en la ID, así que mi ejemplo usa un guión bajo).

Nick Gilbert
fuente
1
Sí, tiene usted razón. La propiedad de ID utiliza guión bajo. Nombre de propiedad utiliza signo de dólar.
Josh Stodola
3

Un ejemplo: para seleccionar todos <a>los correos con ID que terminen en _editar:

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

o

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

Como se trata de ASP.NET, simplemente puede usar la etiqueta ASP <% =%> para imprimir el ClientID generado de txtTitle:

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

Esto resultará en ...

$('ctl00$ContentBody$txtTitle')

... cuando se representa la página.

Nota: en Visual Studio, Intellisense le gritará por poner etiquetas ASP en JavaScript. Puede ignorar esto ya que el resultado es JavaScript válido.

Miguel
fuente
44
El OP no tiene 'ctl00$ContentBody$txtTitle', él sí 'txtTitle', y le falta el líder #para que coincida con una identificación. Pero el OP ya ha rechazado una sugerencia similar (desde que se eliminó): esto no funcionará a menos que coloque mi Javascript directamente en el marcado, lo cual es una pesadilla organizacional. La separación del comportamiento es crucial para este proyecto.
Martijn Pieters
1

Prueba esto:

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

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

Para encontrar una identificación de iframe que termine con "iFrame" dentro de una página que contiene muchos iframes.

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

                     }                   
                  });     
         });
neelmeg
fuente