クラス名で始まるすべての項目を取得

Question

私は特定のdivを表示しようとしています。私がこれを行うことを決めたのは、まず "page"で始まるすべての要素を隠してから、正しいdivだけを表示することです。私はconsole.log(items);私は空白の配列を取得する場合

<form>  
    <input type="text" onfocus="showfields(1);"> 
    <input type="text" onfocus="showfields(2);"> 
</form> 
<div class="page1 row">Some content</div> 
<div class="page1 row">Some content</div> 
<div class="page2 row">Some content</div> 
<div class="page2 row">Some content</div> 
<script> 
    function showfields(page){ 
     //hide all items that have a class starting with page* 
     var patt1 = /^page/; 
     var items = document.getElementsByClassName(patt1); 
     console.log(items); 
     for(var i = 0; i < items.length; i++){ 
      items[i].style.display = "none"; 
     } 

     //now show all items that have class 'page'+page 
     var item = document.getElementsByClassName('page' + page); 
     item.style.display = ''; 
    } 
</script> 

：ここに私の（簡体字）のコードです。正規表現が正しいと確信しています（「page」で始まるすべての項目を取得してください）。 私が使用しているコードは古いJSですが、jQueryを使用することに悪影響はありません。また、regexpを使用しないソリューションがある場合は、regexpを使用するのが初めてであるため、これも問題ありません。あなたは、一致している：

Answer 1

getElementsByClassNameはクラスのみではなく、クラスのビットに一致するクラス名で始まるすべてのdivを取得します。正規表現を渡すことはできません（まあ、可能ですが、文字列に型変換されていますが、これは役に立たない）。

最善のアプローチは、このdiv要素がページで複数のクラス...

<div class="page page1"> 

すなわちを使用することです、それはまた、ページ1です。

次に簡単にdocument.getElementsByClassName('page')とすることができます。

---

あなたはquerySelectorとsubstring matching attribute selectorに目を向けることができ、それに失敗：

document.querySelectorAll("[class^=page]") 

を...しかしpageSomethingは、クラス属性で最初記載されているクラス名である場合にのみ動作します。

document.querySelectorAll("[class*=page]") 

...しかし、それはすなわち、それはclass="not-page"にマッチします（単に「ページ」で始まるクラスを有するものを「ページ」を言及したクラスの属性と一致していないだろう。

をあなたが最後に使用することができ、言いました要素に一致するかどうかを確認するために.classListをループします。

var potentials = document.querySelectorAll("[class*=page]"); 
 
console.log(potentials.length); 
 
elementLoop: 
 
    for (var i = 0; i < potentials.length; i++) { 
 
    var potential = potentials[i]; 
 
    console.log(potential); 
 
    classLoop: 
 
     for (var j = 0; j < potential.classList.length; j++) { 
 
     if (potential.classList[j].match(/^page/)) { 
 
      console.log("yes"); 
 
      potential.style.background = "green"; 
 
      continue elementLoop; 
 
     } 
 
     } 
 
    console.log("no"); 
 
    potential.style.background = "red"; 
 
    }

<div class="page">Yes</div> 
 
<div class="notpage">No</div> 
 
<div class="some page">Yes</div> 
 
<div class="pageXXX">Yes</div> 
 
<div class="page1">Yes</div> 
 
<div class="some">Unmatched entirely</div>

Answer 2

あなたは、セレクタ
内RegExpを使用することはできませんが、（class="row pageCool"つまりは、のような）ことができますuse Document.querySelectorAll()と比べElement.classList.contains()

function showfields(page){ 
 
    
 
    var items = document.querySelectorAll("[class*=page].row"); 
 
    
 
    [].forEach.call(items, function(el){ 
 
     el.style.display = el.classList.contains("page"+ page) ? "" : "none"; 
 
    }); 
 

 
}

<form>  
 
    <input type="text" onfocus="showfields(1);"> 
 
    <input type="text" onfocus="showfields(2);"> 
 
</form> 
 
<div class="page1 row">Some content1</div> 
 
<div class="page1 row">Some content1</div> 
 
<div class="page2 row">Some content2</div> 
 
<div class="page2 row">Some content2</div>

さらに、偽陽性を防ぐためにあなたのセレクタを使用して、具体的にすることができます：親IDを追加する...

あなたはjQueryのソリューションを使用することができます

Answer 3

..

var $divs = $('div[class^="page"]'); 

これはpage

Answer 4

$(document).ready(function() { 
     $("[class^=page]").show(); 
     $("[class^=page]").hide(); 
    }); 

それはCSSクラスの言及ですべてのdivの表示/非表示されます、特定のCSSクラスで非表示のdivのを表示するために使用します。