jquery Klassenname ändern

336

Ich möchte die Klasse eines td-Tags anhand der ID des td-Tags ändern:

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

Ich möchte dies tun können, während ich mich im Klickereignis eines anderen dom-Objekts befinde. Wie greife ich nach der ID des td und ändere seine Klasse?

jquery css

— aeq
quelle

704

Sie können die Klasse (unabhängig davon, was sie war ) folgendermaßen festlegen :.attr()

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

Wenn Sie eine Klasse hinzufügen möchten , verwenden Sie .addclass()stattdessen Folgendes:

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

Oder eine kurze Möglichkeit, Klassen auszutauschen, indem Sie .toggleClass():

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

Hier ist die vollständige Liste der jQuery-Methoden speziell für das classAttribut .

— Nick Craver
quelle

Hey @Nick, füge einen Ereignishandler hinzu, der das erste td-Elternteil [ var $td = $(this).parents('td:first')] findet und dann seine ID [ var id = $td.attr('id');] und auch die Klasse [ var class = $td.attr('class');] erhält, weil er möchte, dass ein

— Klickelement

@ Bob - Ich folge nicht, woher bekommst du das, eine andere Frage? Dieser sagt, er hat die ID des Elements :) Auch um ein Elternteil zu bekommen, können Sie .closest('td')anstelle von verwenden .parents('td:first'):)

— Nick Craver

1

sein letzter satz:

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?

- vielleicht lese ich es falsch, vielleicht meint er damit die td's id zu benutzen um die klasse zu wechseln ...

— bob fincheimer

1

@ Bob - Richtig ... ein anderes DOM-Objekt, Sie nehmen an , dass sich das Objekt innerhalb des <td>fraglichen Objekts befindet :)

— Nick Craver

Beachten Sie, dass das change_meTeil optional ist, wenn SietoggleClass()

— Sakisk

93

Ich denke du suchst das:

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

— Fosco
quelle

32

Ich denke, er möchte einen Klassennamen ersetzen.

So etwas würde funktionieren:

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

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

— Jack
quelle

Aber er wollte es innerhalb des Klickereignisses eines anderen Dom-Objekts tun

— Keyser

9

Sie können dies tun: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Oder Sie können dies tun

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

— Alireza Masali
quelle

6

Sie können addClass oder toggleClass auschecken

— Karl Johan
quelle

6

Sie möchten es also ändern, wenn es angeklickt wird ... lassen Sie mich den gesamten Prozess durchgehen. Nehmen wir an, Ihr "Externes DOM-Objekt" ist eine Eingabe wie eine Auswahl:

Beginnen wir mit diesem 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>

Einige sehr grundlegende CSS:

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

Und richten Sie ein jQuery-Ereignis ein:

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

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

Wenn Sie jetzt etwas aus der Auswahl auswählen, wird automatisch eine Zelle mit dem passenden Text gefunden, sodass Sie den gesamten ID-basierten Prozess untergraben können. Wenn Sie dies auf diese Weise tun möchten, können Sie das Skript natürlich leicht so ändern, dass IDs anstelle von Werten verwendet werden

.filter("#"+useVal)

und stellen Sie sicher, dass Sie die IDs entsprechend hinzufügen. Hoffe das hilft!

— Trafalmadorianer
quelle

4

BEARBEITEN:

Wenn Sie sagen, dass Sie es von einem verschachtelten Element aus ändern , benötigen Sie die ID überhaupt nicht. Sie können dies stattdessen tun:

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

Ursprüngliche Antwort:

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

Eine weitere Option ist:

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

— user113716
quelle

Ich glaube nicht, dass der OP in der <td>, obwohl er sein könnte, sorgfältig

— durchgelesen wird

@Nick - Ja, ich habe das Update hinzugefügt, weil ich es erneut gelesen habe und gesehen habe, dass OP gefragt hat: "Wie kann ich die ID des td abrufen und ändern ..." . Dies führte mich zu der Annahme, dass OP die ID nicht im Griff hat, was meine ursprüngliche Antwort nicht sehr hilfreich machen würde. Vor diesem Hintergrund gehe ich davon aus, dass das Element mit dem Handler verschachtelt ist. Aber es ist sicherlich eine Annahme.

— user113716

2

Für den Fall, dass Sie bereits eine Klasse haben und zwischen Klassen wechseln müssen, um eine Klasse hinzuzufügen, können Sie Umschaltereignisse verketten:

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

— Lentyai
quelle

2

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

or

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

— Prabhu
quelle

1

Diese Methode funktioniert gut für mich

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

— Puterafx Fx
quelle

Machen Sie einige Details darüber.

— Flugzeuge

0

Klasse mit jquery ändern

Versuche dies

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

Mit dieser Abfrage können Sie auch ein beliebiges Attribut festlegen

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

— Liebe Kumar
quelle

-1

Ich benutze besser die .prop, um den Klassennamen zu ändern und es hat perfekt funktioniert:

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

Für diese Codezeile müssen Sie nur den Namen von newClass und natürlich die ID des Elements im nächsten Beispiel ändern: idelementinyourpage

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

Übrigens, wenn Sie suchen möchten, welcher Stil auf ein Element angewendet wird, klicken Sie einfach in Ihrem Browser auf F12, wenn Ihre Seite angezeigt wird, und wählen Sie dann auf der Registerkarte des DOM-Explorers das Element aus, das Sie sehen möchten. In Stile können Sie jetzt sehen, welche Stile auf Ihr Element angewendet werden und von welcher Klasse es gelesen wird.

— Alexis Gassan
quelle