Quiero aplicar un estilo a un determinado div. Por ejemplo, en el momento de la carga, se mostrarán todos los que tengan una clase de foo, pero es posible que desee desactivar una instancia de la clase foo que tenga un id de bar.
Nicholas Murray
1
Entonces simplemente haría $('#bar.foo').toggle();que solo tuviera una identificación, ya que SE REQUIERE que sea única para el documento. si solo desea alternar esa identificación si es de clase foo, simplemente agregue la clase al selector de identificación. si el selector encuentra un conjunto vacío no sucederá nada, si encuentra un conjunto con resultados (del cual solo habrá uno) entonces alternará el elemento. Creo que estás pensando demasiado en esto.
prodigitalson
3
solo para decir que es frustrante que la gente diga "¿por qué querrías hacer eso?" cuando estoy tratando de hacer esto ahora mismo. El problema con hasClass es que devuelve True si CUALQUIER elemento que coincide con el selector tiene la clase dada. Entonces, cuando tengo muchos p con la clase "pastel" y nombres de clases adicionales para cada uno ("uno", "dos", etc.), tengo un problema. Quiero seleccionar el conjunto general de p.cake y luego tener un condicional (si class = "one" - $ var = 23 - etc). El punto es que estoy tratando de pasar un $ var diferente según el nombre de la clase adicional. Estoy tratando de no tener que repetir todo el bit o
Stella
Respuestas:
171
Puede integrar esa lógica en el selector combinando varios selectores . Por ejemplo, podríamos apuntar a todos los elementos con un ID dado, que también tienen una clase particular:
Esto debería verse similar a algo que escribirías en CSS. Tenga en cuenta que no se aplicará a todos los #fooelementos (aunque solo debería haber uno) y no se aplicará a todos los .barelementos (aunque puede haber muchos). Solo hará referencia a elementos que califiquen en ambos atributos.
jQuery también tiene un gran .ismétodo que le permite determinar si un elemento tiene ciertas cualidades. Puede probar una colección jQuery con un selector de cadenas, un elemento HTML u otro objeto jQuery. En este caso, simplemente lo compararemos con un selector de cadenas:
$(".bar:first").is("#foo");// TRUE if first '.bar' in document is also '#foo'
Tal vez el código ingrese en una función de devolución de llamada que necesita manejar un caso determinado de manera diferente. Entonces, a la función se le pasa un objeto jQuery automáticamente con atributos desconocidos. En este caso, $ ('su respuesta'). Es ('útil');
Peter G
1
Puedo pensar en varias razones. ¿Qué sucede si desea aplicar una configuración específica para dispositivos móviles, como si un elemento tiene el id = "mobile"? El por qué no es importante.
Disponible el
Bueno, solo 1 elemento debería tener un dado, de lo idcontrario, debería ser algún otro atributo ... Supongo que si la ubicación estructural del elemento en cuestión cambia según la página o el cliente / agente de usuario, entonces está bien, pero aparte de eso ... .
prodigitalson
19
actualización: lo siento, entendí mal la pregunta, eliminé la .has()respuesta.
otra forma alternativa, crea un .hasId()complemento
// the plugin
$.fn.hasId =function(id){returnthis.attr('id')== id;};// select first class
$('.mydiv').hasId('foo')?
console.log('yes'): console.log('no');// select second class// $('.mydiv').eq(1).hasId('foo')// or
$('.mydiv:eq(1)').hasId('foo')?
console.log('yes'): console.log('no');
Lo siento, pero creo que malinterpretó la pregunta: has () API informa esto: Reduzca el conjunto de elementos coincidentes a aquellos que tienen un descendiente que coincide con el selector o elemento DOM. El OP pregunta cómo probar si el elemento con la clase 'myDiv' también tiene el Id foo, mientras que has () buscará descendientes de 'myDiv' que tengan el Id 'foo'.
Inclinación
7
Supongamos que está iterando a través de algunos objetos DOM y desea encontrar y capturar un elemento con un ID determinado.
El mismo código se puede modificar fácilmente para el selector de clases.
<divid="myDiv"><divclass="fo"><div><divclass="bar"><div><divclass="fo"><div><divclass="bar"><div><divclass="fo"><div><divclass="bar"><div></div>
$('#myDiv div').each(function() {
if($(this).hasClass('bar'))
//do something with bar
});
Me alegra que haya resuelto su problema con index (), lo que sea que funcione para usted. Espero que esto ayude a otros con el mismo problema. Salud :)
cada uno es innecesario porque nunca habrá más de uno #theMysteryId.
prodigitalson
2
Bueno, le ahorra la molestia de asignarlo a una variable, verificar si la longitud no está vacía y luego continuar con el código. Si el selector no coincide con nada, jQuery simplemente no llamará a la función "each", por lo que es agradable y limpio. Ahora, si todo lo que quieres hacer es llamar a alguna API de jQuery, entonces seguro.
Puntiagudo
4
Solo para decir que finalmente resolví esto usando index ().
NADA más parecía funcionar.
Entonces, para los elementos hermanos, esta es una buena solución si primero selecciona por una clase común y luego desea modificar algo de manera diferente para cada uno específico.
EDITAR: para aquellos que no saben (como yo) index () da un valor de índice para cada elemento que coincide con el selector, contando desde 0, dependiendo de su orden en el DOM. Siempre que sepa cuántos elementos hay con class = "foo", no necesita una identificación.
Obviamente, esto no siempre ayudará, pero alguien puede encontrarlo útil.
$('#bar.foo').toggle();
que solo tuviera una identificación, ya que SE REQUIERE que sea única para el documento. si solo desea alternar esa identificación si es de clasefoo
, simplemente agregue la clase al selector de identificación. si el selector encuentra un conjunto vacío no sucederá nada, si encuentra un conjunto con resultados (del cual solo habrá uno) entonces alternará el elemento. Creo que estás pensando demasiado en esto.Respuestas:
Puede integrar esa lógica en el selector combinando varios selectores . Por ejemplo, podríamos apuntar a todos los elementos con un ID dado, que también tienen una clase particular:
Esto debería verse similar a algo que escribirías en CSS. Tenga en cuenta que no se aplicará a todos los
#foo
elementos (aunque solo debería haber uno) y no se aplicará a todos los.bar
elementos (aunque puede haber muchos). Solo hará referencia a elementos que califiquen en ambos atributos.jQuery también tiene un gran
.is
método que le permite determinar si un elemento tiene ciertas cualidades. Puede probar una colección jQuery con un selector de cadenas, un elemento HTML u otro objeto jQuery. En este caso, simplemente lo compararemos con un selector de cadenas:fuente
is()
. Debería haber un.hasId()
selector solo porque parece un socio obvio para.hasClass()
realmente ...Probablemente usaría
$('.mydiv').is('#foo');
Eso dicho si conoces el Id, ¿por qué no lo aplicas al selector en primer lugar?fuente
id
contrario, debería ser algún otro atributo ... Supongo que si la ubicación estructural del elemento en cuestión cambia según la página o el cliente / agente de usuario, entonces está bien, pero aparte de eso ... .actualización: lo siento, entendí mal la pregunta, eliminé la
.has()
respuesta.otra forma alternativa, crea un
.hasId()
complementofuente
Supongamos que está iterando a través de algunos objetos DOM y desea encontrar y capturar un elemento con un ID determinado.
Puedes escribir algo como encontrar
Tenga en cuenta que si usara un selector de clases, el método de búsqueda devolverá todos los elementos coincidentes.
o podría escribir una función iterativa que hará un trabajo más avanzado
El mismo código se puede modificar fácilmente para el selector de clases.
Me alegra que haya resuelto su problema con index (), lo que sea que funcione para usted. Espero que esto ayude a otros con el mismo problema. Salud :)
fuente
fuente
#theMysteryId
.Solo para decir que finalmente resolví esto usando index ().
NADA más parecía funcionar.
Entonces, para los elementos hermanos, esta es una buena solución si primero selecciona por una clase común y luego desea modificar algo de manera diferente para cada uno específico.
EDITAR: para aquellos que no saben (como yo) index () da un valor de índice para cada elemento que coincide con el selector, contando desde 0, dependiendo de su orden en el DOM. Siempre que sepa cuántos elementos hay con class = "foo", no necesita una identificación.
Obviamente, esto no siempre ayudará, pero alguien puede encontrarlo útil.
fuente
Compruebe si existe el ID del elemento
fuente
También puede verificar si el elemento id se usa al hacerlo:
Utilizo este método para tablas de datos globales y tablas de datos ordenadas específicas
fuente