jquery परिवर्तन वर्ग नाम

336

मैं td टैग की आईडी को देखते हुए td टैग की श्रेणी बदलना चाहता हूं:

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

मैं कुछ अन्य डोम ऑब्जेक्ट के क्लिक इवेंट के अंदर ऐसा करने में सक्षम होना चाहता हूं। मैं td की आईडी कैसे पकड़ सकता हूँ और उसकी कक्षा कैसे बदल सकता हूँ?

jquery css

— aeq
स्रोत

704

आप कर सकते हैं सेट वर्ग (यह क्या की परवाह किए बिना था का उपयोग करके) .attr(), इस तरह:

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

यदि आप एक वर्ग जोड़ना चाहते हैं , तो .addclass()इसके बजाय इसका उपयोग करें:

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

या कक्षाओं का उपयोग करने का एक छोटा तरीका .toggleClass():

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

यहाँ विशेष रूप से classविशेषता के लिए jQuery के तरीकों की पूरी सूची है ।

— निक क्रेवर
स्रोत

अरे @ क्लिक करें, एक घटना हैंडलर जोड़ें जो पहले td माता-पिता को पाता है [ var $td = $(this).parents('td:first')] तो यह id [ var id = $td.attr('id');] और वर्ग भी मिलता है [ var class = $td.attr('class');क्योंकि वह इसे ट्रिगर करने के लिए TD के अंदर एक क्लिक तत्व चाहता है

— Bob Fincheimer

@ याकूब - मैं पीछा नहीं करता, तुम कहाँ से, एक और सवाल कर रहे हो? यह एक कहता है कि वह भी एक माता पिता आप उपयोग कर सकते हैं पाने के लिए तत्व की :) आईडी है .closest('td')बजाय .parents('td:first'):)

— निक 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 की आईडी का उपयोग करे ...

— Bob Fincheimer

1

@Bob - सही ... कुछ अन्य डोम वस्तु, आप कर रहे हैं यह सोचते हैं कि ऑब्जेक्ट के अंदर है <td>प्रश्न में :)

— निक Craver

ध्यान दें कि change_meयदि आप उपयोग करते हैं तो यह हिस्सा वैकल्पिक हैtoggleClass()

— sakisk

93

मुझे लगता है कि आप इसके लिए देख रहे हैं:

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

— Fosco
स्रोत

32

मुझे लगता है कि वह एक वर्ग नाम बदलना चाहता है।

कुछ इस तरह काम करेगा:

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

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

— जैक
स्रोत

लेकिन वह इसे किसी अन्य डोम ऑब्जेक्ट के क्लिक इवेंट के अंदर करना चाहता था

— कीसर

9

आप यह कर सकते हैं: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); या आप यह कर सकते हैं

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

— अलिर्ज़ा मसाली
स्रोत

6

आप देख सकते हैं addClass या toggleClass

— कार्ल जोहान
स्रोत

6

तो आप इसे बदलना चाहते हैं जब यह क्लिक किया जाता है ... मुझे पूरी प्रक्रिया से गुजरने दें। मान लेते हैं कि आपका "एक्सटर्नल डोम ऑब्जेक्ट" एक इनपुट है, जैसे एक चयन:

आइए इस 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>

कुछ बहुत ही बुनियादी सीएसएस:

#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())});
});

अब, जब भी आप कुछ का चयन करते हैं, तो यह स्वचालित रूप से मिलान पाठ के साथ एक सेल मिलेगा, जिससे आप पूरी आईडी-आधारित प्रक्रिया को हटा सकते हैं। बेशक, यदि आप इसे इस तरह से करना चाहते हैं, तो आप आसानी से कह कर मूल्यों के बजाय आईडी का उपयोग करने के लिए स्क्रिप्ट को संशोधित कर सकते हैं

.filter("#"+useVal)

और आईडी को उचित रूप से जोड़ना सुनिश्चित करें। उम्मीद है की यह मदद करेगा!

— Trafalmadorian
स्रोत

4

संपादित करें:

यदि आप कह रहे हैं कि आप इसे एक नेस्टेड तत्व से बदल रहे हैं , तो आपको आईडी की आवश्यकता नहीं है। आप इसके बजाय यह कर सकते हैं:

$(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
स्रोत

मुझे नहीं लगता कि ओपी अंदर <td>, हालांकि वह हो सकता है, ध्यान से फिर से पढ़ :)

— निक Craver

@ निक - हाँ, मैंने अपडेट जोड़ा क्योंकि मैंने इसे फिर से पढ़ा और देखा कि ओपी पूछ रहा था कि "मैं td की आईडी कैसे पकड़ूं और बदलूं ..." । इससे मुझे विश्वास हो गया कि ओपी के पास आईडी पर एक हैंडल नहीं है, जो मेरे मूल उत्तर को बहुत उपयोगी नहीं बना देगा। इसे देखते हुए, मैं मान रहा हूं कि हैंडलर के साथ तत्व नेस्टेड है। लेकिन यह निश्चित रूप से एक धारणा है।

— user113716

2

इस घटना में कि आपके पास पहले से ही एक वर्ग है और कक्षाओं को जोड़ने के लिए विरोध के रूप में कक्षाओं के बीच वैकल्पिक करने की आवश्यकता है, आप घटनाओं को टॉगल करने के लिए श्रृंखला बना सकते हैं:

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

— lentyai
स्रोत

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 का बेहतर उपयोग करता हूं और यह पूरी तरह से काम करता है:

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

कोड की इस पंक्ति के लिए आपको बस अगले छूट में newClass का नाम बदलना होगा, और निश्चित रूप से तत्व की आईडी: idelementinyourpage

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

वैसे, जब आप यह खोजना चाहते हैं कि किसी भी तत्व पर किस शैली को लागू किया गया है, तो आप अपने पृष्ठ को दिखाए जाने पर अपने ब्राउज़र पर बस F12 पर क्लिक करें और फिर DOM एक्सप्लोरर के टैब में उस तत्व का चयन करें, जिसे आप देखना चाहते हैं। स्टाइल्स में अब आप देख सकते हैं कि आपके एलिमेंट पर कौन से स्टाइल लागू होते हैं और किस क्लास से इसकी रीडिंग होती है।

— एलेक्सिस गैसन
स्रोत