jquery changer le nom de la classe

336

Je veux changer la classe d'une balise td compte tenu de l'ID de la balise td:

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

Je veux pouvoir le faire à l'intérieur de l'événement click d'un autre objet dom. Comment saisir l'identifiant du td et changer sa classe?

jquery css aeq
la source

Réponses:

704

Vous pouvez définir la classe (quelle qu'elle soit ) en utilisant .attr(), comme ceci:

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

Si vous souhaitez ajouter une classe, utilisez .addclass()plutôt, comme ceci:

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

Ou un moyen rapide d'échanger des classes en utilisant .toggleClass():

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

Voici la liste complète des méthodes jQuery spécifiquement pour l' classattribut .

Nick Craver
la source
Hé @Nick, ajoutez un gestionnaire d'événements qui trouve le premier parent td [ var $td = $(this).parents('td:first')] puis obtient son id [ var id = $td.attr('id');] et aussi la classe [ var class = $td.attr('class');] parce qu'il veut qu'un élément click à l'intérieur du TD le déclenche
Bob Fincheimer
@Bob - Je ne suis pas, d'où tirez-vous cela, une autre question? Celui-ci dit qu'il a l'ID de l'élément :) Aussi pour obtenir un parent que vous pouvez utiliser à la .closest('td')place de .parents('td:first'):)
Nick Craver
1
sa dernière phrase: 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?- peut-être que je le lis mal, peut-être qu'il veut dire utiliser l'identifiant du td pour changer de classe ...
Bob Fincheimer
1
@Bob - Bon ... un autre objet DOM, vous supposez que cet objet est à l'intérieur de la <td>question en question :)
Nick Craver
Notez que la change_mepartie est facultative si vous utiliseztoggleClass()
sakisk
93

Je pense que vous cherchez ceci:

$('#td_id').removeClass('change_me').addClass('new_class');
Fosco
la source
32

Je pense qu'il veut remplacer un nom de classe.

Quelque chose comme ça fonctionnerait: 

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

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

jack
la source
Mais il voulait le faire à l'intérieur de l'événement click d'un autre objet dom
keyser
9

Vous pouvez le faire: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Ou vous pouvez le faire

$("#td_id").removeClass('Old_class').addClass('New_class');
Alireza Masali
la source
6

Donc, vous voulez le changer QUAND il est cliqué ... laissez-moi parcourir tout le processus. Supposons que votre "objet DOM externe" soit une entrée, comme une sélection:

Commençons par ce 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>

Quelques CSS très basiques:

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

Et configurez un événement jQuery:

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

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

Maintenant, chaque fois que vous choisissez quelque chose dans la sélection, il trouvera automatiquement une cellule avec le texte correspondant, vous permettant de renverser tout le processus basé sur l'ID. Bien sûr, si vous vouliez le faire de cette façon, vous pourriez facilement modifier le script pour utiliser des ID plutôt que des valeurs en disant

.filter("#"+useVal)

et assurez-vous d'ajouter les identifiants de manière appropriée. J'espère que cela t'aides!

Trafalmadorian
la source
4

ÉDITER:

Si vous dites que vous le modifiez à partir d'un élément imbriqué , vous n'avez pas du tout besoin de l'ID. Vous pouvez le faire à la place:

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

Réponse originale:

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

Une autre option est:

$('#td_id').toggleClass('change_me some_other_class');
user113716
la source
Je ne pense pas que l'OP soit à l'intérieur du <td>, bien qu'il puisse être, relisez attentivement :)
Nick Craver
@ Nick - Ouais, j'ai ajouté la mise à jour parce que je l'ai relue et j'ai vu que OP demandait "Comment puis-je récupérer l'identifiant du td et le changer ..." . Cela m'a amené à croire que OP n'a pas de poignée sur l'ID, ce qui rendrait ma réponse originale pas très utile. Compte tenu de cela, je suppose que l'élément avec le gestionnaire est imbriqué. Mais c'est certainement une hypothèse.
user113716
2

Dans le cas où vous avez déjà une classe et devez alterner entre les classes comme opposé pour ajouter une classe, vous pouvez enchaîner les événements de bascule:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});
lentyai
la source
2 
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

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

cette méthode fonctionne bien pour moi

$('#td_id').attr('class','new class');
Puterafx Fx
la source
Faites quelques détails à ce sujet.
avion le
0

changer de classe en utilisant jquery

essaye ça

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

vous pouvez également définir n'importe quel attribut à l'aide de cette requête

$('#selector_id').attr('Attribute Name','Attribute Value');
Love Kumar
la source
-1

Je ferais mieux d'utiliser le .prop pour changer le className et cela a parfaitement fonctionné:

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

pour cette ligne de code il suffit de changer le nom de newClass, et bien sûr l'id de l'élément, dans l'exemple suivant: idelementinyourpage

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

Soit dit en passant, lorsque vous souhaitez rechercher le style appliqué à n'importe quel élément, vous cliquez simplement sur F12 dans votre navigateur lorsque votre page est affichée, puis sélectionnez dans l'onglet de l'explorateur DOM, l'élément que vous souhaitez voir. Dans Styles, vous pouvez maintenant voir quels styles sont appliqués à votre élément et dans quelle classe sa lecture.

Alexis Gassan
la source