복붙노트

[JQUERY] jQuery로 요소 클래스의 목록을 가져옵니다

JQUERY

jQuery로 요소 클래스의 목록을 가져옵니다

해결법

  1. 1.당신은 document.getElementById를 ( 'divId는')를 사용할 수 있습니다 className.split을 (/ \ S + /).; 당신이 클래스 이름의 배열을 얻을 수 있습니다.

    당신은 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
    }
});

  2. 2.왜 아무도 단순히 나열하고있다.

    왜 아무도 단순히 나열하고있다.

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

    편집 : MarkAmery의 반대 @ 수정에 / \ S + / 대신 ''의 스플릿. (감사 @YashaOlatoto.)

  3. 3.지원 브라우저에서, 당신은 DOM 요소 'classList 속성을 사용할 수 있습니다.

    지원 브라우저에서, 당신은 DOM 요소 'classList 속성을 사용할 수 있습니다.

    $(element)[0].classList

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

    당신이 classList 속성을 지원하지 않는 오래된 브라우저 버전을 지원해야하는 경우, 링크 된 MDN 페이지에는 이에 대한 심을 포함 - 비록 심지어 심 IE 8 이하 Internet Explorer 버전에없는 작동합니다.

  4. 4.여기서 플러그 정합 요소 (들)는 모든 클래스의 배열을 반환 이는이 jQuery를 인

    여기서 플러그 정합 요소 (들)는 모든 클래스의 배열을 반환 이는이 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);

  5. 5.이 하나를 시도해야합니다 :

    이 하나를 시도해야합니다 :

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

    이 요소의 현재의 모든 클래스의 배열을 돌려줍니다.

  6. 6.

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

     //do something

});

  7. 7.최신 정보:

    최신 정보:

    @Ryan 레너드가 정확하게 지적했듯이, 정말 내 자신을 만든 점을 수정하지 않습니다 내 대답은 ... 당신은 모두 트림에 필요하려면 string.replace (예를 들어) (/ + / g, "")로 이중 공백을 제거 .. 아니면 el.className을 분할하고 (예를 들어) arr.filter (부울)와 빈 값을 제거 할 수 있습니다.

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

    이상 현대

    const classes = element.classList;

    낡은:

    모든 주어진 대답으로, 사용자 .trim에 잊지 못할해야한다 () (또는 $ .trim ())

    클래스 추가 및 제거 도착하기 때문에, 클래스의 스트링 사이의 여러 구역이 있다는 일어날 수있다 .. 예를 'Class1의 Class2의 강좌 3'..

    이것은 [ '클래스 1', 'Class2의', '' '' '', '강좌 3'] 차례 것이다 ..

    당신이 트림 사용하는 경우, 모든 다중 공간이 제거 얻을 ..

  8. 8.

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

  9. 9.이것은 당신에게 너무 도움이 될 수 있습니다. 나는 childern 요소의 클래스를 얻기 위해이 기능을 사용하고 있습니다 ..

    이것은 당신에게 너무 도움이 될 수 있습니다. 나는 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();
    });
}

    귀하의 경우에 당신은 슬픔의 ipsum의 클래스는 u는 다음과 같이 할 수 싶어 이제 클래스 [2] ;.

  10. 10.덕분에이 용 - 내가 프로그래밍 객체를 만들려고 해요으로 나는 비슷한 문제가 발생 된 것이다 계층 클래스 이름, 그 이름은 반드시 내 스크립트에 알려진되지 않을 수 있습니다에도 불구하고.

    덕분에이 용 - 내가 프로그래밍 객체를 만들려고 해요으로 나는 비슷한 문제가 발생 된 것이다 계층 클래스 이름, 그 이름은 반드시 내 스크립트에 알려진되지 않을 수 있습니다에도 불구하고.

    나의 스크립트에서 나는 태그가의 도움말 텍스트를 제공하는 다음 [some_class] _toggle의 클래스를 태그 [some_class] 플러스 전환의 클래스를 제공하고,에 의해 / 도움말 텍스트를 해제합니다. 이 코드는 성공적으로 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");}
    }
    });
}

  11. 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/

  12. 12.나는 형 이미지의 요소에 대해, 유사한 문제가 있었다. 나는 요소가 특정 클래스의 여부를 확인할 필요가 있었다. 우선은 함께 시도 :

    나는 형 이미지의 요소에 대해, 유사한 문제가 있었다. 나는 요소가 특정 클래스의 여부를 확인할 필요가 있었다. 우선은 함께 시도 :

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

    하지만 좋은는 "이 기능은이 요소를 사용할 수 없습니다"있어요.

    그럼 난 DOM 탐색기 내 요소를 검사하고 내가 사용할 수있는 아주 좋은 특성을 보았다 : 클래스 명. 그것은 내 요소의 모든 클래스의 이름은 공백으로 구분이 포함되어 있습니다.

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

    당신이 일단, 그냥 평소와 같이 문자열을 분할합니다.

    내 경우에는이 일 :

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

    나는이 (IMG) 이외의 요소를 다른 종류의 작업을 것 같은데.

    희망이 도움이.

  13. 13.자바 스크립트, DOM 내의 노드 classList 요소의 특성을 제공한다. 간단하게 사용

    자바 스크립트, DOM 내의 노드 classList 요소의 특성을 제공한다. 간단하게 사용

      element.classList

    형식의 개체를 반환합니다

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

    목적은 같은 포함 된 기능 추가, 당신이 사용할 수있는 제거있다

  14. 14.당신이 뭔가를 따를 수 있습니다.

    당신이 뭔가를 따를 수 있습니다.

    $('#elementID').prop('classList').add('yourClassName')
$('#elementID').prop('classList').remove('yourClassName')

  15. 15.늦은 비트,하지만 사용하여 확장 () 기능을 사용하면 예컨대 모든 요소에 "hasClass ()"를 호출 할 수 있습니다 : VAR hasClass = $ ( '# divId는') hasClass ( 'someClass.');

    늦은 비트,하지만 사용하여 확장 () 기능을 사용하면 예컨대 모든 요소에 "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);

  16. 16.문제는 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

  17. 17.여기서 당신은 모든 클래스의 배열을 반환, 단지 불통 readsquare의 답변을 이동 :

    여기서 당신은 모든 클래스의 배열을 반환, 단지 불통 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'));

    18. from https://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 배열에 숫자 키를 사용하여 자바 스크립트 객체를 변환  (0) 2020.09.27
[JQUERY] jQuery를 - $ (문서) .ready와 $ (창) .load 사이의 차이점은 무엇입니까?  (0) 2020.09.27
[JQUERY] 어떻게 추가하거나 쿼리 문자열 매개 변수를 업데이트 할 수 있습니다?  (0) 2020.09.26
[JQUERY] 수동 catch되지 않은 TypeErrors에서 PrimeFaces 결과로 / 로딩 jQuery를 추가  (0) 2020.09.26
[JQUERY] jQuery를 아이디 선택은 첫 번째 요소에 대해서만 작동합니다  (0) 2020.09.26
,

티스토리툴바