क्लिक किए गए तत्व की कक्षा कैसे प्राप्त करें?


228

मैं यह पता नहीं लगा सकता कि classक्लिक किए गए तत्व का मूल्य कैसे प्राप्त किया जाए।

जब मैं कोड बेलो का उपयोग करता हूं, तो मुझे हर बार "नोड-205" मिलता है ।

jQuery:

.find('> ul')
.tabs(
{
    selectedClass: 'active',
    select: function (event, ui) {
        //shows only the first element of list
        $(this).children('li').attr('class');
    },
    cookie: { expires: 0 },
    fx: fx
})

HTML:

<ul class="tabs">
  <li class="node-205"></li>
  <li class="node-150"></li>
  <li class="node-160"></li>
</ul>

आपका सवाल बल्कि अस्पष्ट है ... क्या आप किसी jquery प्लगइन का उपयोग कर रहे हैं?
जहरथठ

यदि यह एक क्लिक की गई वस्तु है, तो क्या आपको इवेंट को बाँधने और क्लास लेने के लिए क्लिक () फ़ंक्शन का उपयोग नहीं करना चाहिए? शायद मैं इस सवाल को पूरी तरह से समझ नहीं पाया ...
ई-सिटिस

जवाबों:


396

यहां एक त्वरित jQuery का उदाहरण है जो प्रत्येक "ली" टैग के लिए एक क्लिक इवेंट जोड़ता है, और फिर क्लिक किए गए तत्व के लिए वर्ग विशेषता को पुनर्प्राप्त करता है। आशा करता हूँ की ये काम करेगा।

$("li").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

समान रूप से, आपको ऑब्जेक्ट को jQuery में लपेटना नहीं है:

$("li").click(function() {
   var myClass = this.className;
   alert(myClass);
});

और नए ब्राउज़रों में आप वर्ग नामों की पूरी सूची प्राप्त कर सकते हैं :

$("li").click(function() {
   var myClasses = this.classList;
   alert(myClasses.length + " " + myClasses[0]);
});

आप classListपुराने ब्राउज़र का उपयोग करके अनुकरण कर सकते हैंmyClass.split(/\s+/);


1
"वर्ग" एक मान्य चर नाम नहीं है।
फ्रेड बर्गमैन

1
उन अजीब स्थितियों में से एक जहां jQuery का लंबा रास्ता है। this.className आपको $ (इस) .attr ("वर्ग") के समान ही देगा
डेविड गिल्बर्टसन

क्या होगा यदि तत्व में एक से अधिक वर्ग नाम हों?
धर्मन

1
निश्चित रूप से क्यों नहीं, लेकिन दूसरा उदाहरण मेरे लिए वर्ग नाम को पुनः प्राप्त नहीं कर सकता है। हालाँकि, 1 उदाहरण महान काम करता है! धन्यवाद! एक टन मेरी मदद की। :)
मुलवरपेंट


28

मैंने इस सवाल को देखा तो मुझे लगा कि मैं इस पर थोड़ा और विस्तार कर सकता हूं। यह उस विचार का विस्तार है जो @SteveFenton के पास था। किसी clickघटना को प्रत्येक liतत्व से बांधने के बजाय , ulनीचे से घटनाओं को प्रत्यायोजित करना अधिक कुशल होगा ।

JQuery के 1.7 और उच्चतर के लिए

$("ul.tabs").on('click', 'li', function(e) {
   alert($(this).attr("class"));
});

प्रलेखन: .on()

JQuery के लिए 1.4.2 - 1.7

$("ul.tabs").delegate('li', 'click', function(e) {
   alert($(this).attr("class"));
});

प्रलेखन: .delegate()

JQuery 1.3 - 1.4 के लिए अंतिम उपाय के रूप में

$("ul.tabs").children('li').live('click', function(e) {
   alert($(this).attr("class"));
});

या

$("ul.tabs > li").live('click', function(e) {
   alert($(this).attr("class"));
});

प्रलेखन: .live()


17

यह काम कर जाना चाहिए:

...
select: function(event, ui){ 
   ui.tab.attr('class');
} ,
...

Ui.tab के बारे में अधिक जानकारी के लिए http://jqueryui.com/demos/tabs/#Events देखें


इसका क्या मतलब है? आप और अधिक समझा सकते हैं?

यह ui.tab के बजाय ui.item है जिसे आपको उपयोग करने की आवश्यकता है। मैंने सोचा कि यह ui.item था।
jeroen.verhoest

11

प्रदान किए गए सभी समाधान आपको उस तत्व को जानने के लिए मजबूर करते हैं जिसे आप पहले से क्लिक करेंगे । यदि आप किसी भी तत्व पर क्लिक करना चाहते हैं, जिसका आप उपयोग कर सकते हैं:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })

2
यह ध्यान दिया जाना चाहिए कि यदि आईडी प्राप्त करना अविश्वसनीय है, तो कोई हमेशा $(e.target)इसके बजाय उपयोग कर सकता है $('#' + e.target.id)और jQuery अभी भी इस मामले को यथोचित रूप से संभाल लेगा।
BobChao87

9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.