javascript - معنى - jquery css




اختبار إذا كان العنصر يحتوي على فصل دراسي؟ (13)

باستخدام جافا سكريبت عادي (ليس jQuery) ، هل هناك طريقة يمكنني اختبار لمعرفة ما إذا كان عنصر يحتوي على فصل دراسي؟

حاليا ، أنا أفعل هذا:

HTML:

<div id="test" class="class1"></div>;

JS:

var test = document.getElementById("test");
var testClass = test.className;
switch(testClass){
    case "class1": test.innerHTML = "I have class1"; break;
    case "class2": test.innerHTML = "I have class2"; break;
    case "class3": test.innerHTML = "I have class3"; break;
    case "class4": test.innerHTML = "I have class4"; break;
    default: test.innerHTML = "";
}

هذه النتائج في هذا الإخراج ، وهو الصحيح:

I have class1

المشكلة هي أنه إذا قمت بتغيير HTML إلى هذا ...

<div id="test" class="class1 class5"></div>

... لم يعد هناك تطابق تام ، لذلك أحصل على الإخراج الافتراضي من لا شيء ( "" ). ولكن ما زلت أريد أن يكون الإخراج I have class1 لأن <div> مازال يحتوي على class .class1 .


  1. تعد خدعة Felix لإضافة مسافات لوضعها في className والسلسلة التي تبحث عنها هي الطريقة الصحيحة لتحديد ما إذا كانت العناصر تحتوي على الفصل أم لا.

  2. للحصول على سلوك مختلف وفقًا للفصل ، يمكنك استخدام المراجع أو الوظائف ، داخل الخريطة:

    function fn1(element){ /* code for element with class1 */ }
    
    function fn2(element){ /* code for element with class2 */ }
    
    function fn2(element){ /* code for element with class3 */ }
    
    var fns={'class1': fn1, 'class2': fn2, 'class3': fn3};
    
    for(var i in fns) {
        if(hasClass(test, i)) {
            fns[i](test);
        }
    }
    
    • ل (var i in fns) يتكرر من خلال المفاتيح الموجودة داخل خريطة fns.
    • عدم وجود انقطاع بعد fnsi يسمح بتنفيذ التعليمات البرمجية كلما كان هناك تطابق - بحيث إذا كان العنصر ، fi ، class1 و class2 ، سيتم تنفيذ كل من fn1 و fn2.
    • وتتمثل ميزة هذا الأسلوب في أن التعليمات البرمجية للتنفيذ لكل فصل هي تعسفية ، مثل الشفرة الموجودة في بيان التبديل ؛ في المثال الخاص بك جميع الحالات التي أجريت عملية مماثلة ، ولكن غدا قد تحتاج إلى القيام بأشياء مختلفة لكل منهما.
    • يمكنك محاكاة الحالة الافتراضية من خلال وجود متغير حالة تخبرك ما إذا تم العثور على تطابق في الحلقة أم لا.

أعتقد أن الحل الأمثل سيكون هذا

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");

أي خط onliner مبسط: 1

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

لا يتم دعم 1 indexOf للصفائف بواسطة IE (ofcourse). هناك الكثير من بقع القرد التي يمكن العثور عليها على الشبكة لذلك.


إذا كان للعنصر اسم فئة واحد فقط ، يمكنك التحقق منه بسرعة عن طريق الحصول على صفة class. الإجابات الأخرى أكثر قوة ، لكن بالتأكيد هذه هي حالات الاستخدام.

if ( element.getAttribute('class') === 'classname' ) {

}

إليك مقتطف صغير إذا كنت تحاول التحقق من عنصر wether يحتوي على فصل دراسي ، دون استخدام jQuery.

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

هذا يمثل حقيقة أن هذا العنصر قد يحتوي على أسماء فئات متعددة مفصولة بمسافة.

أو

يمكنك أيضًا تعيين هذه الوظيفة إلى النموذج الأولي للعنصر.

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

.hasClass() إلى مثل هذا (تشبه إلى حد .hasClass() وظيفة .hasClass() jQuery's):

document.getElementById('MyDiv').hasClass('active');

استخدم element.classList .contains method:

element.classList.contains(class);

هذا يعمل على جميع المتصفحات الحالية وهناك polyfills لدعم المتصفحات القديمة أيضا.

بدلاً من ذلك ، إذا كنت تعمل مع المتصفحات القديمة ولا تريد استخدام polyfills لإصلاحها ، indexOf استخدام indexOf صحيحًا ، ولكن عليك تعديله قليلاً:

function hasClass(element, class) {
    return (' ' + element.className + ' ').indexOf(' ' + class+ ' ') > -1;
}

وإلا فستتحقق أيضًا إذا كان الصف الذي تبحث عنه جزءًا من اسم فئة آخر.

DEMO

يستخدم jQuery طريقة مشابهة (إن لم تكن هي نفسها).

بالتطبيق على المثال:

نظرًا لأن هذا لا يعمل مع عبارة التبديل ، يمكنك تحقيق نفس التأثير مع هذا الرمز:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

كما أنه أقل تكرارًا ؛)


جرب هذه:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

راجع ارتباط Codepen هذا للحصول على طريقة أسرع وأسهل للتحقق من عنصر ما إذا كان يحتوي على فئة معينة باستخدام JavaScript ~!

hasClass (Vanilla JS)

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

في المتصفحات الحديثة ، يمكنك فقط استخدام الطريقة التي contains Element.classList :

testElement.classList.contains(className)

عرض

var testElement = document.getElementById('test');

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content')
});
<div id="test" class="main main-content content"></div>

المتصفحات المدعومة

(من caniuse.com/#feat=classlist )

Polyfill

إذا كنت تريد استخدام Element.classList ولكنك تريد أيضًا دعم المستعرضات الأقدم ، ففكر في استخدام هذا polyfill بواسطة Eli Gray .


لقد قمت بإنشاء طريقة نموذج أولي تستخدم classList ، إذا أمكن ، تلجأ إلى indexOf :

Element.prototype.hasClass = Element.prototype.hasClass || 
  function(classArr){
    var hasClass = 0,
        className = this.getAttribute('class');
  
    if( this == null || !classArr || !className ) return false;
  
    if( !(classArr instanceof Array) )
      classArr = classArr.split(' ');

    for( var i in classArr )
      // this.classList.contains(classArr[i]) // for modern browsers
      if( className.split(classArr[i]).length > 1 )  
          hasClass++;

    return hasClass == classArr.length;
};


///////////////////////////////
// TESTS (see browser's console when inspecting the output)

var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text

console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );

console.log( elm2, ' has class "a": ', elm2.hasClass('a') );

// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );

console.log( elm4, ' has class "a": ', elm4.hasClass('a') );
<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
    <text x="10" y="20" class='a'>SVG Text Example</text>
</svg>

صفحة الاختبار


هذا قديم بعض الشيء ، ولكن ربما سيجد شخص ما حلتي مفيدة:

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}

وأود أن بولي ملء وظيفة classList واستخدام بناء الجملة الجديد. وبهذه الطريقة ، سيستخدم المتصفح الجديد التطبيق الجديد (وهو أسرع كثيرًا) وستتلقى المتصفحات القديمة فقط الأداء الذي تم الحصول عليه من الشفرة.

https://github.com/remy/polyfills/blob/master/classList.js


className هو مجرد سلسلة حتى يمكنك استخدام الدالة indexOf العادية لمعرفة ما إذا كانت قائمة الفئات تحتوي على سلسلة أخرى.







dom