jQuery Determina si una clase coincidente tiene una identificación determinada

95

¿Qué es jQuery tiene id equivalente a la siguiente declaración?

$('#mydiv').hasClass('foo')

para que pueda dar un nombre de clase y verificar que contenga una identificación proporcionada.

algo como:

$('.mydiv').hasId('foo')
Nicolás Murray
fuente
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:

$("#foo.bar"); // Matches <div id="foo" class="bar">

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'
Sampson
fuente
32
+1 para is(). Debería haber un .hasId()selector solo porque parece un socio obvio para .hasClass()realmente ...
Matt Fletcher
43

Probablemente usaría $('.mydiv').is('#foo');Eso dicho si conoces el Id, ¿por qué no lo aplicas al selector en primer lugar?

prodigitalson
fuente
17
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) {
  return this.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');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

ewwink
fuente
5
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.

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
</div>

Puedes escribir algo como encontrar

$('#myDiv').find('#bar')

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

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
    <div id="fo1"><div>
    <div id="bar1"><div>
    <div id="fo2"><div>
    <div id="bar2"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).attr('id') == 'bar1')
       //do something with bar1
});

El mismo código se puede modificar fácilmente para el selector de clases.

<div id="myDiv">
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="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 :)

Nima Foladi
fuente
4
$('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ });
Puntiagudo
fuente
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.

Stella
fuente
3

Compruebe si existe el ID del elemento

if ($('#id').attr('id') == 'id')
{
  //OK
}

Việt Anh
fuente
1

También puede verificar si el elemento id se usa al hacerlo:

if(typeof $(.div).attr('id') == undefined){
   //element has no id
} else {
   //element has id selector
}

Utilizo este método para tablas de datos globales y tablas de datos ordenadas específicas

usuario3379167
fuente
lo indefinido debe estar entre comillas para que funcione así 'indefinido'
Leo