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(' ')클래스 이름을 공백으로 분리 할 수 ​​없기 때문에 할 수 없습니다 .

지원되는 브라우저에서 DOM 요소의 classList속성을 사용할 수 있습니다 .

$(element)[0].classList

요소가 가진 모든 클래스를 나열하는 배열과 같은 객체입니다.

이 classList속성을 지원하지 않는 이전 브라우저 버전을 지원해야하는 경우 연결된 MDN 페이지에도 해당 shim이 포함됩니다. 비록 shim도 IE 8 이하의 Internet Explorer 버전에서는 작동하지 않습니다.

다음은 일치하는 요소가 가진 모든 클래스의 배열을 반환하는 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
    }
);

다음은 http://jsfiddle.net/GD8Qn/8/ 을 보여주고 테스트하기 위해 설정 한 jsFiddle입니다.

축소 된 자바 스크립트

;!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);})

이것이 당신에게도 도움이 될 수 있습니다. 나는이 함수를 사용하여 자식 요소의 클래스를 얻었습니다.

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 탐색기에서 요소를 검사하고 className이라는 매우 유용한 속성을 보았습니다. 그것은 내 요소의 모든 클래스의 이름을 공백으로 구분하여 포함했습니다.

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

일단 이것을 얻으면 평소대로 문자열을 나눕니다.

내 경우에는 이것이 효과가 있었다.

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

나는 이것이 다른 종류의 요소 (img 외에도)와 함께 작동한다고 가정합니다.

도움이 되길 바랍니다.

javascript는 dom의 노드 요소에 대한 classList 속성을 제공합니다. 간단히 사용

  element.classList

형태의 객체를 반환합니다

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

객체에는 포함, 추가, 제거 등의 기능이 있습니다.

약간 늦었지만 extend () 함수를 사용하면 모든 요소에서 "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(){
  ..
});

비 IE 브라우저를위한 classList도 있습니다 :

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