jquery-Classのxxxで始まる要素を取得します.

9771 ワード

classのうちm-で始まる要素をすべて取得しようとすると、まず考えられるのはCSS Selectorです.例えばp[class^=m-]ですが、問題はclassの値が複数あることです.このようなa m-1 Classに遭遇すると認識できません.もう一つのSelectorは、ある文字列が含まれていると判断します.この欠点は、p[class^=m-] Classが同じように一致することであるが、実際にはa-m-1で始まるわけではない.
解決策は、CSS Selectorを直接使用することはできませんが、CSS Selectorを使用して部分をフィルタリングし、HTMLの内容など、手動で判断することができます.
<p class="a b m-1">p>
<p class="m-2">p>
<p class="a-m-1">p>

JavaScript:
var elements = $('p[class*=m-]');

for(var i = 0; i < elements.length; i++) {
    var current = elements.eq(i);
    console.log('A: ', current[0].outerHTML);
    var classes = current.attr('class').split(' ');
    for(var j = 0; j < classes.length; j++) {
        if (classes[j].lastIndexOf('m-', 0) === 0) {
            console.log('B: ', current[0].outerHTML);
            break;
        }
    }
}

出力:m- A: – "

" B: – "

" A: – "

" B: – "

" A: – "


Bで始まるのが正確な結果であり,Aで始まるのがCSS Selectorによる初期スクリーニングの結果であることがわかる.