รับรายการคลาสสำหรับองค์ประกอบด้วย jQuery

มีวิธีใน jQuery ที่จะวนซ้ำหรือกำหนดให้กับอาเรย์ทั้งหมดของคลาสที่กำหนดให้กับองค์ประกอบหรือไม่?

อดีต

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

ฉันจะมองหาคลาส "พิเศษ" ดังเช่นใน "dolor_spec" ด้านบน ฉันรู้ว่าฉันสามารถใช้ hasClass () แต่ชื่อคลาสจริงอาจไม่เป็นที่รู้จักในเวลานั้น

คุณสามารถใช้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
    }
});

ทำไมจึงไม่มีใครอยู่ในรายการ

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

แก้ไข: @MarkAmery ชี้ให้เห็นคุณไม่สามารถทำได้เพียง.split(' ')เพราะชื่อคลาสสามารถคั่นด้วยช่องว่างใด ๆ

ในการรองรับเบราว์เซอร์คุณสามารถใช้classListคุณสมบัติขององค์ประกอบ DOM

$(element)[0].classList

มันเป็นวัตถุที่คล้ายกับอาร์เรย์ที่แสดงรายการคลาสทั้งหมดที่มีอยู่

หากคุณต้องการสนับสนุนเบราว์เซอร์เวอร์ชันเก่าที่ไม่สนับสนุนclassListคุณสมบัติหน้า MDN ที่เชื่อมโยงจะมี shim อยู่ด้วยถึงแม้ว่า shim จะไม่ทำงานบน Internet Explorer เวอร์ชันต่ำกว่า IE 8

นี่คือปลั๊กอิน 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);

คุณควรลองอันนี้:

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

ส่งคืนอาร์เรย์ของคลาสปัจจุบันทั้งหมดขององค์ประกอบ

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

     //do something

});

ปรับปรุง:

@Ryan Leonard ชี้ให้เห็นอย่างถูกต้องคำตอบของฉันไม่ได้แก้ไขจุดที่ฉันทำเอง ... คุณจำเป็นต้องตัดแต่งและลบช่องว่างสองครั้งด้วย string.replace (/ + / g, "") .. หรือคุณสามารถแบ่ง el.className แล้วลบค่าว่างด้วย (ตัวอย่าง) arr.filter (Boolean)

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

หรือทันสมัยกว่า

const classes = element.classList;

เก่า:

ด้วยคำตอบที่ได้รับทั้งหมดคุณไม่ควรลืมที่จะใช้. trim () (หรือ $ .trim ())

เนื่องจากคลาสได้รับการเพิ่มและลบออกมันสามารถเกิดขึ้นได้ว่ามีหลายช่องว่างระหว่างสตริงคลาส .. เช่น 'class1 class2 class3' ..

สิ่งนี้จะเปลี่ยนเป็น ['class1', 'class2', '', '', '', 'class3'] ..

เมื่อคุณใช้การตัดแต่งหลาย ๆช่องว่างจะถูกลบออก ..

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

อาจช่วยคุณได้เช่นกัน ฉันใช้ฟังก์ชั่นนี้เพื่อรับคลาสขององค์ประกอบ childern ..

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 u calsses[2];สามารถทำเช่นนี้ในขณะนี้

ขอบคุณสำหรับสิ่งนี้ - ฉันมีปัญหาที่คล้ายกันเนื่องจากฉันพยายามเชื่อมโยงวัตถุโดยทางโปรแกรมจะมีชื่อคลาสแบบลำดับขั้นแม้ว่าชื่อเหล่านั้นอาจไม่รู้จักสคริปต์ของฉันก็ตาม

ในสคริปต์ของฉันฉันต้องการ<a>แท็กเพื่อเปิดข้อความช่วยเหลือ / ปิดโดยการให้<a>แท็ก[some_class]บวกระดับของแล้วให้ข้อความช่วยเหลือมันของชั้นเรียนของtoggle [some_class]_toggleรหัสนี้ประสบความสำเร็จในการค้นหาองค์ประกอบที่เกี่ยวข้องโดยใช้ jQuery:

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

ลองสิ่งนี้ คุณจะได้รับชื่อคลาสทั้งหมดจากองค์ประกอบทั้งหมดของเอกสาร

$(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/

ฉันมีปัญหาที่คล้ายกันสำหรับองค์ประกอบของภาพประเภท ฉันต้องการตรวจสอบว่าองค์ประกอบดังกล่าวเป็นคลาสที่แน่นอนหรือไม่ ก่อนอื่นฉันลองด้วย:

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

แต่ฉันได้ดี "ฟังก์ชั่นนี้ไม่สามารถใช้ได้สำหรับองค์ประกอบนี้"

จากนั้นฉันตรวจสอบองค์ประกอบของฉันใน DOM explorer และฉันเห็นคุณลักษณะที่ดีมากที่ฉันสามารถใช้: className มันมีชื่อของคลาสทั้งหมดขององค์ประกอบของฉันคั่นด้วยช่องว่าง

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

เมื่อคุณได้รับสิ่งนี้เพียงแค่แบ่งสตริงตามปกติ

ในกรณีของฉันนี้ใช้งานได้:

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

ฉันสมมติว่าสิ่งนี้จะใช้ได้กับองค์ประกอบอื่น ๆ (นอกเหนือจาก img)

หวังว่ามันจะช่วย

javascript จัดเตรียมคุณลักษณะ classList สำหรับองค์ประกอบโหนดใน dom เพียงแค่ใช้

  element.classList

จะส่งคืนวัตถุของฟอร์ม

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

วัตถุนั้นมีฟังก์ชั่นเช่นมี, เพิ่ม, ลบซึ่งคุณสามารถใช้ได้

สายไปหน่อย แต่การใช้ฟังก์ชั่นขยาย () ช่วยให้คุณเรียก "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);

คำถามคือสิ่งที่ Jquery ออกแบบมาให้ทำ

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

และทำไมไม่มีใครได้รับ. find ()เป็นคำตอบ

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

นอกจากนี้ยังมี classList สำหรับเบราว์เซอร์ที่ไม่ใช่ IE:

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

ที่นี่คุณไปเพียงแค่ปรับคำตอบของreadsquareเพื่อส่งกลับอาร์เรย์ของคลาสทั้งหมด:

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'));

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ก็ยัง

<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