jquery変更クラス名

336

tdタグのIDを指定して、tdタグのクラスを変更したい：

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

他のdomオブジェクトのクリックイベント内でこれを実行できるようにしたいと思います。tdのIDを取得してそのクラスを変更するにはどうすればよいですか？

jquery css

— aeq
ソース

704

次のようにを使用して、クラスを（それが何だったかに関係なく）設定できます。.attr()

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

クラスを追加する場合は、.addclass()代わりに次のように使用します。

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

または、以下を使用してクラスを交換する簡単な方法.toggleClass()：

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

以下は、具体的にはclass属性用のjQueryメソッドの完全なリストです。

— ニッククレイバー
ソース

@Nickさん、最初のtd親[ var $td = $(this).parents('td:first')] を見つけるイベントハンドラーを追加し、id [ var id = $td.attr('id');]とクラス[ var class = $td.attr('class');]を取得します。これは、TD内のクリック要素がトリガーするためです

— Bob Fincheimer

@ボブ-私はフォローしていません、あなたはどこからそれを得ていますか、別の質問？これは、彼が要素のIDを持っていると言います:)また、.closest('td')代わりに使用できる親を取得するには.parents('td:first'):)

— Nick Craver

1

彼の最後の文：

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?

-多分私はそれを間違って読んでいるかもしれません、多分彼はクラスを変更するためにtdのIDを使用することを意味します...

— ボブ・フィンクハイマー

1

@ボブ-そうです... 他の DOMオブジェクトの一部です。オブジェクトが問題の内部にあると想定しています<td>:)

— Nick Craver

change_me使用する場合、パーツはオプションですtoggleClass()

— sakisk

93

私はあなたがこれを探していると思います：

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

— フォスコ
ソース

32

彼はクラス名を置き換えたいと思います。

このような何かがうまくいくでしょう：

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

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

— ジャック
ソース

しかし、彼は他のdomオブジェクトのクリックイベント内でそれを実行したいと思っていました

— キーサー

9

これを行うことができます：$("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); またはこれを行うことができます

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

— アリレザ・マサリ
ソース

6

あなたはaddClassまたはtoggleClassをチェックすることができます

— カール・ヨハン
ソース

6

クリックされたときに変更したいので、プロセス全体を実行します。「外部DOMオブジェクト」が選択のような入力であると仮定しましょう：

この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>

いくつかの非常に基本的なCSS：

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

そして、jQueryイベントを設定します。

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

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

これで、選択から何かを選択するたびに、一致するテキストを含むセルが自動的に検出され、IDベースのプロセス全体を覆すことができます。もちろん、そのようにしたい場合は、次のようにして、値ではなくIDを使用するようにスクリプトを簡単に変更できます。

.filter("#"+useVal)

IDを適切に追加してください。お役に立てれば！

— トラファルマドリアン
ソース

4

編集：

ネストされた要素から変更する場合は、IDはまったく必要ありません。代わりにこれを行うことができます：

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

元の答え：

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

別のオプションは次のとおりです。

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

— user113716
ソース

OPは内部にあるとは思わ<td>ないが、彼はそうかもしれないが、注意深く

— 読み直す

@Nickは-私はOPが求めていたことをもう一度読んで見たので、ええ、私は更新を追加しました「どのように私は、TDのIDと変更をつかむありません...」。これは私にOPがIDのハンドルを持たないことを信じるようにさせました、それは私の最初の答えをあまり役に立たなくするでしょう。これを前提として、ハンドラーのある要素がネストされていると想定しています。しかし、それは確かに仮定です。

— user113716 2010

2

すでにクラスがあり、クラスを追加するために反対にクラス間を切り替える必要がある場合は、トグルイベントをチェーンできます。

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

— レンチャイ
ソース

2

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

or

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

— プラブ
ソース

1

この方法は私にとってはうまくいきます

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

— Puterafx Fx
ソース

それについていくつかの詳細を作成します。

— 航空機

0

jqueryを使用してクラスを変更する

これを試して

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

このクエリを使用して任意の属性を設定することもできます

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

— ラブクマー
ソース

-1

私は.propを使用してclassNameを変更する方がよく、完全に機能しました。

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

このコード行では、次の例のように、newClassの名前と、もちろん要素のIDを変更するだけです。idelementinyourpage

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

ちなみに、どの要素にどのスタイルが適用されているかを検索するには、ページが表示されているときにブラウザーでF12キーを押し、DOMエクスプローラーのタブで目的の要素を選択するだけです。スタイルでは、要素にどのスタイルが適用され、どのクラスからその読み取りが行われているかを確認できます。

— アレクシス・ガッサン
ソース