jquery cambiar nombre de clase

336

Quiero cambiar la clase de una etiqueta td dada la identificación de la etiqueta td:

<td id="td_id" class="change_me"> ...

Quiero poder hacer esto dentro del evento click de algún otro objeto dom. ¿Cómo tomo la identificación del td y cambio su clase?

jquery css

— aeq
fuente

704

Puede configurar la clase (independientemente de lo que era ) mediante el uso de .attr()esta manera:

$("#td_id").attr('class', 'newClass');

Si desea agregar una clase, use .addclass()en su lugar, así:

$("#td_id").addClass('newClass');

O una forma corta de intercambiar clases usando .toggleClass():

$("#td_id").toggleClass('change_me newClass');

Aquí está la lista completa de métodos jQuery específicamente para el classatributo .

— Nick Craver
fuente

Hola @Nick, agregue un controlador de eventos que encuentre el primer td padre [ var $td = $(this).parents('td:first')] y luego obtenga su id [ var id = $td.attr('id');] y también la clase [ var class = $td.attr('class');] porque quiere un elemento de clic dentro del TD para activarlo

— Bob Fincheimer

@Bob: no entiendo, ¿de dónde sacas eso? ¿Otra pregunta? Este dice que tiene la ID del elemento :) También para obtener un padre que puede usar en .closest('td')lugar de.parents('td:first') :)

— Nick Craver

1

su última oración:

I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?

- tal vez lo estoy leyendo mal, tal vez quiere decir usar la identificación del td para cambiar la clase ...

— Bob Fincheimer

1

@Bob - Correcto ... algún otro objeto DOM, estás asumiendo que ese objeto está dentro de la <td>pregunta :)

— Nick Craver

Tenga en cuenta que la change_meparte es opcional si usatoggleClass()

— sakisk

93

Creo que estás buscando esto:

$('#td_id').removeClass('change_me').addClass('new_class');

— Fosco
fuente

32

Creo que quiere reemplazar un nombre de clase.

Algo como esto funcionaría:

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

de http://monstertut.com/2012/06/use-jquery-to-change-css-class/

— Jack
fuente

Pero quería hacerlo dentro del evento de clic de algún otro objeto dom

— keyer

9

Puedes hacer esto: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); o puedes hacer esto

$("#td_id").removeClass('Old_class').addClass('New_class');

— Alireza Masali
fuente

6

Puede consultar addClass o toggleClass

— Karl Johan
fuente

6

Entonces quieres cambiarlo CUANDO se hace clic ... déjame pasar por todo el proceso. Supongamos que su "Objeto DOM externo" es una entrada, como una selección:

Comencemos con este HTML:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

Algunos CSS muy básicos:

#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

Y configure un evento jQuery:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

Ahora, cada vez que elija algo de la selección, encontrará automáticamente una celda con el texto correspondiente, lo que le permitirá subvertir todo el proceso basado en id. Por supuesto, si quisiera hacerlo de esa manera, podría modificar fácilmente el script para usar ID en lugar de valores diciendo

.filter("#"+useVal)

y asegúrese de agregar los identificadores adecuadamente. ¡Espero que esto ayude!

— Trafalmadoriano
fuente

4

EDITAR:

Si está diciendo que lo está cambiando de un elemento anidado , no necesita la ID en absoluto. Puedes hacer esto en su lugar:

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

Respuesta original:

$('#td_id').removeClass('change_me').addClass('some_other_class');

Otra opción es:

$('#td_id').toggleClass('change_me some_other_class');

— usuario113716
fuente

No creo que el OP esté dentro del <td>, aunque podría estarlo, releelo cuidadosamente :)

— Nick Craver

@Nick - Sí, agregué la actualización porque la leí nuevamente y vi que OP preguntaba "¿Cómo tomo la identificación del td y cambio ..." . Esto me llevó a creer que OP no tiene un identificador, lo que haría que mi respuesta original no fuera muy útil. Dado esto, supongo que el elemento con el controlador está anidado. Pero ciertamente es una suposición.

— user113716

2

En el caso de que ya tenga una clase y necesite alternar entre clases como opuestas para agregar una clase, puede encadenar eventos:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});

— lentyai
fuente

2

$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});

— Prabhu
fuente

1

este método me funciona bien

$('#td_id').attr('class','new class');

— Puterafx Fx
fuente

Haz algunos detalles al respecto.

— avión

0

cambiar de clase usando jquery

prueba esto

$('#selector_id').attr('class','new class');

También puede establecer cualquier atributo utilizando esta consulta

$('#selector_id').attr('Attribute Name','Attribute Value');

— Amor kumar
fuente

-1

Mejor uso el .prop para cambiar el className y funcionó perfectamente:

$(#td_id).prop('className','newClass');

para esta línea de código solo tiene que cambiar el nombre de newClass y, por supuesto, la identificación del elemento, en el siguiente ejemplo: idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

Por cierto, cuando desee buscar qué estilo se aplica a cualquier elemento, simplemente haga clic en F12 en su navegador cuando se muestre su página, y luego seleccione en la pestaña del Explorador DOM, el elemento que desea ver. En Estilos ahora puede ver qué estilos se aplican a su elemento y de qué clase se lee.

— Alexis Gassan
fuente