JQuery के साथ तत्व के लिए वर्ग सूची प्राप्त करें

Question

क्या jQuery के माध्यम से एक तत्व को सौंपे जाने वाले सभी वर्गों के लिए लूप के माध्यम से या असाइन करने का एक तरीका है?

पूर्व।

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

मैं ऊपर "dolor_spec" के रूप में एक "विशेष" वर्ग की तलाश करूंगा। मुझे पता है कि मैं hasClass () का उपयोग कर सकता हूं, लेकिन उस समय वास्तविक वर्ग का नाम जरूरी नहीं हो सकता है।

Comments

यदि आप समय पर क्लास का नाम नहीं जानते हैं, तो आपको hasClass () का उपयोग करने से रोका जा रहा है, तो आप यह जानना चाहते हैं कि यह सरणी में कौन सा है?

— डूमस्पॉर्क 13

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

— Buggabill

ठीक है, मैं समझता हूँ कि आप हार्डकोड क्यों नहीं करना चाहेंगे। लेकिन अगर आप redsquare के उदाहरण को देखने के लिए कुछ समय लेते हैं, तो आप देखेंगे कि आपने 'someClass' को if block में लिया है। किसी भी तरह से आप इसे एक चर के साथ हासिल कर सकते हैं।

— प्रातः

वर्ग विशेषता का उपयोग करने के बजाय, आप अपने नामस्थान के अंदर एक त्रुटि सूची चर हो सकते हैं जिसमें त्रुटियों के साथ तत्वों का DOM संदर्भ होता है। इस प्रकार हर बार विशेषता सूची खींचने की आवश्यकता को समाप्त करने, इसे पुनरावृत्त करने, DOM तत्व को खोजने, और इस पर ध्यान केंद्रित करने की आवश्यकता है।

— डूमस्पोर्क

Answer 1

आप document.getElementById('divId').className.split(/\s+/);वर्ग नामों की एक सरणी प्राप्त करने के लिए उपयोग कर सकते हैं ।

तो फिर आप इसे पुन: व्यवस्थित कर सकते हैं और जिसे आप चाहते हैं उसे पा सकते हैं।

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'someClass') {
        //do something
    }
}

jQuery वास्तव में यहाँ आपकी मदद नहीं करता है ...

var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item === 'someClass') {
        //do something
    }
});

Comments

यह वही है जो मैंने किया है, लेकिन मुझे यकीन नहीं था कि वहाँ jQuery फ़ंक्शन में एक बिल्ड था जिसने आपको कक्षाओं का संग्रह दिया था।

— सैंडर

FYI करें: jQuery का उपयोग करता है className.split (/ \ s + /)

— kͣeͣmͮp

अपने आप को एक jQuery प्लगइन जोड़ें:$.fn.classList = function() {return this[0].className.split(/\s+/);};

— ripper234

या फिर आप कर सकते हैं: if ($.inArray("someclass",classList)>=0) { /* hasClass someclass*/ }

— sambomartin

यहाँ एक जावास्क्रिप्ट विशेषज्ञ नहीं है। क्या आप मुझे बता सकते हैं कि क्या विभाजन (/ \ s + /) केवल विभाजन करने से बेहतर है ("")? यह FF23 / Chrome28 / IE8 में मेरे लिए समान काम करता है।

— रॉबर्टो लिनारेस

Answer 2

किसी को बस सूचीबद्ध क्यों नहीं किया गया है।

$(element).attr("class").split(/\s+/);

संपादित करें: जैसा कि @MarkAmery बताते हैं, आप सिर्फ .split(' ')इसलिए नहीं कर सकते क्योंकि वर्ग के नाम किसी भी तरह के व्हाट्सएप द्वारा अलग किए जा सकते हैं।

Comments

यह स्वीकृत उत्तर का हिस्सा है ... मुझे उन सभी वर्गों की आवश्यकता थी जो एक तत्व पर लागू होते थे।

— बुग्गाबिल

क्योंकि यह गलत है! कक्षाएं किसी भी तरह के व्हाट्सएप द्वारा अलग की जा सकती हैं (जैसे कि आप अपने HTML को कई लाइनों में एक लंबी श्रेणी की विशेषता लपेट सकते हैं), लेकिन यह जवाब उस के लिए जिम्मेदार नहीं है। $('<div class="foo bar baz">').attr("class").split(' ')अपने ब्राउज़र कंसोल में चिपकाने की कोशिश करें (वहां एक टैब वर्ण है); आपको ["foo", "bar baz"]सही वर्ग सूची के बजाय मिलेगा ["foo", "bar", "baz"]।

— मार्क एमी

@ मार्की सही है। यदि आपके पास एक है class="foo <lots of spaces here> bar", तो आप खाली स्ट्रिंग तत्वों के साथ एक सरणी के साथ समाप्त करेंगे।

— जैकब वैन लिंगेन

मुझे लगता है कि 99% मामलों में यह समाधान प्रभावी है, अर्थात आप HTML को नियंत्रित कर रहे हैं। मैं किसी भी कारण के बारे में सोच भी नहीं सकता कि हमें HTML मानकों की अनुमति देने पर भी वर्ग-नामों के बीच टैब या कई स्थानों की संभावना का समर्थन करना होगा।

— गॉर्डन

@GordonRouse कक्षाओं की एक सूची में रेंगने वाला एक अतिरिक्त स्थान काफी सामान्य है, खासकर अगर किसी प्रकार का तर्क कक्षाओं की सूची लिख रहा है।

— एरिक

Answer 3

ब्राउज़रों का समर्थन करने पर, आप DOM तत्वों की classListसंपत्ति का उपयोग कर सकते हैं।

$(element)[0].classList

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

यदि आपको पुराने ब्राउज़र संस्करणों का समर्थन करने की आवश्यकता है जो classListसंपत्ति का समर्थन नहीं करते हैं, तो लिंक किए गए एमडीएन पृष्ठ में इसके लिए एक शिम भी शामिल है - हालांकि यहां तक ​​कि IE 8 से नीचे इंटरनेट एक्सप्लोरर संस्करणों पर भी शिम काम नहीं करेगा।

Comments

स्वच्छ उत्तर और पहिया को सुदृढ़ नहीं करता है।

— मार्को सुल्ला

@ मार्को सुल्ला: यह वास्तव में अप्रचलित सॉफ्टवेयर पर समर्थन के अलावा एक कमी है। .classListएक सच्ची सरणी नहीं है, और इस तरह के तरीके इस .indexOf(⋯)पर काम नहीं करते हैं। यह केवल एक "सरणी जैसी वस्तु" है, जबकि .className.split(/\s+/).indexOf(⋯)(स्वीकृत उत्तर से) काम करता है।

— इंनिस मृसि

आप किसी भी Arrayउपयोग करने के लिए आसानी से परिवर्तित कर सकते हैं [...iterable]याArray.from(iterable)

— Marco Sulla

Answer 4

यहाँ एक jQuery प्लगइन है जो सभी तत्वों के एक मेल को लौटाएगा जिसका मिलान किया गया तत्व है

;!(function ($) {
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j = 0; j < splitClassName.length; j++) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
})(jQuery);

इसका उपयोग करें

$('div').classes();

आपके मामले में रिटर्न

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

आप प्रत्येक वर्ग पर कॉल करने के लिए एक फ़ंक्शन भी पास कर सकते हैं

$('div').classes(
    function(c) {
        // do something with each class
    }
);

यहाँ एक jsFiddle है जिसे मैंने http://jsfiddle.net/GD8Qn/8/ के प्रदर्शन और परीक्षण के लिए स्थापित किया है

न्यूनतम जावास्क्रिप्ट

;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);

Comments

किसी ईवेंट के ClassName विशेषता में क्लासेस कॉपी करते समय FullCalendar के लिए सही फिट ।

— डेन पावर

Answer 5

आपको यह कोशिश करनी चाहिए:

$("selector").prop("classList")

यह तत्व के सभी वर्तमान वर्गों की एक सरणी देता है।

Comments

यह बहुत स्पष्ट है कि स्वीकृत उत्तर, क्या इस पद्धति का उपयोग नहीं करने का कोई कारण है?

— रोजा

वैसे मुझे नहीं पता। लेकिन DOM तत्व से संपत्ति प्राप्त करने का यह उचित तरीका है। और "क्लासलिस्ट" ऐसी संपत्ति है जो आपको तत्व पर लागू सीएसएस वर्गों की एक सरणी देती है।

— P.Petkov

@RozzA शायद यह वापस उपलब्ध नहीं था? लेकिन मैं कहूंगा कि यह अब तक की सबसे उपयुक्त विधि है, जब तक आप jQuery का उपयोग नहीं करते हैं, जहां एक सरल .classListसमाधान है - आपको बस असंगतताओं और / या लापता ब्राउज़र समर्थन पर ध्यान देने की आवश्यकता है ..

— Dennis98

@ डेनिस98 अच्छी कॉल, मैं कभी-कभी भूल जाता हूं कि हाल ही में कितनी तेजी से नई विशेषताएं सामने आई हैं। मैंने सादे .classListब्राउज़र भी किए हैं जो आधुनिक ब्राउज़रों में काफी अच्छी तरह से काम करता है

— RozzA

ध्यान दें कि classListसंपत्ति SVG तत्वों के लिए IE 10/11 पर काम नहीं करती है (हालांकि यह HTML तत्वों के लिए काम करता है)। देखें developer.mozilla.org/en-US/docs/Web/API/Element/classList

— Métoule

Answer 6

var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){

     //do something

});

Answer 7

अपडेट करें:

जैसा कि @ रेयान लियोनार्ड ने सही ढंग से बताया, मेरा जवाब वास्तव में मेरे द्वारा किए गए बिंदु को ठीक नहीं करता है ... आपको दोनों को ट्रिम करने की आवश्यकता है (उदाहरण के लिए) string.replace (/ + / g, "") .. या आप el.className को विभाजित कर सकते हैं और फिर (उदाहरण के लिए) arr.filter (बुलियन) के साथ रिक्त मान हटा सकते हैं।

const classes = element.className.split(' ').filter(Boolean);

या अधिक आधुनिक

const classes = element.classList;

पुराना:

सभी दिए गए उत्तरों के साथ, आपको उपयोगकर्ता को कभी भी नहीं भूलना चाहिए ।trim () (या $ .trim ())

क्योंकि कक्षाएं जोड़ी जाती हैं और हटा दी जाती हैं, ऐसा हो सकता है कि वर्ग स्ट्रिंग के बीच कई स्थान हैं .. जैसे 'class1 class2 class3' ..

यह ['क्लास 1', 'क्लास 2', '', '', '', 'क्लास 3'] में बदल जाएगा।

जब आप ट्रिम का उपयोग करते हैं, तो सभी कई रिक्त स्थान हटा दिए जाते हैं।

Comments

यह गलत है (और जवाब नहीं)। String.trim () और $ .trim () सभी प्रमुख और अनुगामी व्हाट्सएप को हटा दें, और बाकी स्ट्रिंग को अकेले छोड़ दें। jsconsole.com /?% 22% 20% 20a% 20% 20b% 20% 20% 22.trim ()

— रयान लियोनार्ड

क्या आपके पास भी उत्तरों पर एक नज़र थी? सभी देशी जेएस समाधानों ने व्हाट्सएप को अग्रणी और अनुगामी बनाने के लिए जांच नहीं की, इस प्रकार एक दोषपूर्ण वर्ग सूची दी, क्योंकि सरणी में खाली कक्षाएं होंगी .. jQuery ट्रिम के साथ आंतरिक रूप से समान है जब यह कक्षाएं पढ़ता है

— DutchKevac

मैंने अन्य उत्तरों को देखा, और सहमत हूं कि क्लास के नामों के बीच व्हाट्सएप को हटा दिया जाना चाहिए। मैं इंगित कर रहा था कि क) यह अन्य समाधानों पर एक टिप्पणी होनी चाहिए, क्योंकि यह एक पूर्ण उत्तर नहीं है b) .trim () आप की आवश्यकता के लिए कई रिक्त स्थान नहीं निकालते हैं।

— रयान लियोनार्ड

आप वास्तव में पूरी तरह से सही हैं ... मेरी त्वरित टिप्पणी के लिए क्षमा करें .. यह बीच में रिक्त स्थान को नहीं हटाता है ... s.trim ()। प्रतिस्थापित (/ + / g, "") या कुछ और की आवश्यकता होगी कक्षाओं के बीच में सभी कई रिक्त स्थान को निकालने के लिए .. इसके आगे, el.classList लगभग व्यापक रूप से समर्थित है, यह सब मुझे लगता है फिक्सिंग ..

— DutchKevv

बिल्कुल भी परेशानी नहीं है। खुशी से उकेरा गया, .classListएक बहुत क्लीनर दृष्टिकोण है!

— रयान लियोनार्ड

Answer 8

$('div').attr('class').split(' ').each(function(cls){ console.log(cls);})

Comments

यह एक भयानक दुर्व्यवहार है .map; .eachयदि आपको .mapरिटर्न वैल्यू की आवश्यकता नहीं है तो उपयोग करें । किसी भी व्हाट्सएप के बजाय रिक्त स्थान पर विभाजन भी टूट गया है - मेरी टिप्पणी stackoverflow.com/a/10159062/1709587 पर देखें । यहां तक ​​कि अगर इनमें से कोई भी बिंदु सही नहीं था, तो इससे पृष्ठ पर कुछ भी नया नहीं होता है। -1!

— मार्क अमेरीकी

Answer 9

यह भी आपकी मदद कर सकता है। मैंने इस फंक्शन का उपयोग क्रोन तत्व की कक्षाएं लेने के लिए किया है।

function getClickClicked(){
    var clickedElement=null;
    var classes = null;<--- this is array
    ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
        clickedElement = $(e.target);
        classes = clickedElement.attr("class").split(" ");
        for(var i = 0; i<classes.length;i++){
            console.log(classes[i]);
        }
        e.preventDefault();
    });
}

आपके मामले में आप चाहते हैं कि doler_ipsum class u अब इस तरह से कर सके calsses[2];।

Answer 10

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

अपनी स्क्रिप्ट में, मैं चाहता हूं कि टैग प्लस की कक्षा <a>को <a>टैग देकर / उसके बाद मदद पाठ चालू करें और फिर यह पाठ को कक्षा के लिए मदद दे । यह कोड सफलतापूर्वक jQuery का उपयोग करके संबंधित तत्वों को ढूंढ रहा है:[some_class]toggle[some_class]_toggle

$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});

function toggleHelp(obj, mode){
    var classList = obj.attr('class').split(/\s+/);
    $.each( classList, function(index, item){
    if (item.indexOf("_toggle") > 0) {
       var targetClass = "." + item.replace("_toggle", "");
       if(mode===false){$(targetClass).removeClass("off");}
       else{$(targetClass).addClass("off");}
    }
    });
} 

Comments

धन्यवाद एलन, मैं कुछ ऐसा ही कर रहा हूं, मुझे आश्चर्य है कि ऐसा करने का कोई सरल तरीका नहीं है।

— एरिक किगाथी

- 1 - tl; dr; स्पर्शरेखा पर सीधे प्रश्न के लिए प्रासंगिक नहीं है।

— मार्क एमी डे

Answer 11

इसे इस्तेमाल करे। इससे आपको दस्तावेज़ के सभी तत्वों से सभी वर्गों के नाम मिल जाएंगे।

$(document).ready(function() {
var currentHtml="";
$('*').each(function() {
    if ($(this).hasClass('') === false) {
        var class_name = $(this).attr('class');
        if (class_name.match(/\s/g)){
            var newClasses= class_name.split(' ');
            for (var i = 0; i <= newClasses.length - 1; i++) {
                if (currentHtml.indexOf(newClasses[i]) <0) {
                    currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
                }
            }
        }
        else
        {
            if (currentHtml.indexOf(class_name) <0) {
                currentHtml += "."+class_name+"<br>{<br><br>}<br>"
            }
        }
    }
    else
    {
        console.log("none");
    }
});
$("#Test").html(currentHtml);

});

यहाँ काम करने का उदाहरण है: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Answer 12

मेरे पास एक समान मुद्दा था, एक प्रकार की छवि के लिए। मुझे यह जांचने की आवश्यकता है कि क्या तत्व एक निश्चित वर्ग का था। पहले मैंने इसके साथ प्रयास किया:

$('<img>').hasClass("nameOfMyClass"); 

लेकिन मुझे एक अच्छा मिला "यह फ़ंक्शन इस तत्व के लिए उपलब्ध नहीं है"।

तब मैंने DOM एक्सप्लोरर पर अपने तत्व का निरीक्षण किया और मैंने एक बहुत अच्छी विशेषता देखी जिसका मैं उपयोग कर सकता था: className। इसमें रिक्त स्थानों द्वारा अलग किए गए मेरे तत्व के सभी वर्गों के नाम शामिल थे।

$('img').className // it contains "class1 class2 class3"

एक बार जब आप इसे प्राप्त करते हैं, तो हमेशा की तरह स्ट्रिंग को विभाजित करें।

मेरे मामले में यह काम किया:

var listOfClassesOfMyElement= $('img').className.split(" ");

मैं यह मान रहा हूं कि यह अन्य प्रकार के तत्वों (img के अलावा) के साथ काम करेगा।

आशा है ये मदद करेगा।

Answer 13

जावास्क्रिप्ट में एक नोड तत्व के लिए एक क्लासिस्ट विशेषता प्रदान करता है। बस का उपयोग कर

  element.classList

प्रपत्र का कोई ऑब्जेक्ट लौटाएगा

  DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}

ऑब्जेक्ट में फ़ंक्शंस होते हैं, जिन्हें आप जोड़ सकते हैं, हटा सकते हैं

Comments

के अवर नकली stackoverflow.com/a/5457148/1709587 जो तुम से पहले 3 साल तैनात किया गया था; -1।

— मार्क एमी डे

Answer 14

थोड़ी देर, लेकिन विस्तार का उपयोग करके () फ़ंक्शन आपको किसी भी तत्व पर "hasClass ()" कॉल करने देता है, जैसे:
var hasClass = $('#divId').hasClass('someClass');

(function($) {
$.extend({
    hasClass: new function(className) {
        var classAttr = $J(this).attr('class');
        if (classAttr != null && classAttr != undefined) {
            var classList = classAttr.split(/\s+/);
            for(var ix = 0, len = classList.length;ix < len;ix++) {
                if (className === classList[ix]) {
                    return true;
                }
            }
        }
        return false;
    }
}); })(jQuery);

Comments

यह सवाल नहीं था।

— टॉमस

इसके अलावा, jQuery के पास 1.2 संस्करण के बाद से यह फ़ंक्शन अंतर्निहित है।

— एंड्रयू

Answer 15

सवाल यह है कि Jquery क्या करने के लिए डिज़ाइन किया गया है।

$('.dolor_spec').each(function(){ //do stuff

और किसी ने भी .find () उत्तर के रूप में क्यों नहीं दिया है ?

$('div').find('.dolor_spec').each(function(){
  ..
});

गैर-IE ब्राउज़रों के लिए क्लासलिस्ट भी है:

if element.classList.contains("dolor_spec") {  //do stuff

Comments

- 1; अन्य समस्याओं के बीच, आपके पहले दो कोड स्निपेट पूछे गए प्रश्न से संबंधित नहीं हैं और आपका अंतिम स्निपेट एक वाक्यविन्यास त्रुटि है।

— मार्क अमेरी

Answer 16

यहाँ आप जाते हैं, सभी वर्गों के एक सरणी को वापस करने के लिए बस दोबारा लिखा गया उत्तर:

function classList(elem){
   var classList = elem.attr('class').split(/\s+/);
    var classes = new Array(classList.length);
    $.each( classList, function(index, item){
        classes[index] = item;
    });

    return classes;
}

फ़ंक्शन के लिए एक jQuery तत्व पास करें, ताकि एक नमूना कॉल हो:

var myClasses = classList($('#myElement'));

Comments

क्‍लास क्‍लास के माध्‍यम से क्‍लास करें, क्‍लास ऐरे में सभी एलीमेंट्स को जोड़ें और क्‍लासेज एरे को वापस करें? बस क्लासिस्ट को लौटते समय एक ही चाल चलनी चाहिए, है ना?

— मार्टिज़न

नहीं। चूंकि हम एक ऐसी स्थिति का उल्लेख कर रहे हैं जहां एक ही तत्व के लिए कई कक्षाएं हैं। अगर यह इतना आसान था, तो हम इस धागे पर यहाँ नहीं थे :)

— ग्रेगरा

यह धागा कक्षाओं की एक सूची को वापस करने के बारे में है, और बस लौटकर $(elem).attr('class').split(/\s+/)ऐसा करता है। शायद मैं गलत कर रहा हूं, लेकिन मुझे किसी संग्रह के माध्यम से पुनरावृति करने का कोई कारण नहीं दिखता है, सामग्री को एक नए संग्रह में कॉपी करें और उस नए संग्रह को वापस करें।

— मार्टि

Answer 17

मैं जानता हूं कि यह एक पुराना सवाल है लेकिन फिर भी।

<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

var className=".dolor_spec" //dynamic

यदि आप तत्व में हेरफेर करना चाहते हैं

$("#specId"+className).addClass('whatever');

यदि आप जांच करना चाहते हैं कि क्या तत्व में कक्षा है

 $("#specId"+className).length>0

यदि कई वर्ग

//if you want to select ONE of the classes
var classNames = ['.dolor_spec','.test','.test2']
$("#specId"+classNames).addClass('whatever');
$("#specId"+classNames).length>0
//if you want to select all of the classes
var result = {className: ""};
classNames.forEach(function(el){this.className+=el;},result);
var searchedElement= $("#specId"+result.className);
searchedElement.addClass('whatever');
searchedElement.length>0

Comments

इन स्निपेटों में से कोई भी प्रश्न बिल्कुल नहीं पूछा गया है; -1।

— मार्क अमेरी