Erhalten Sie alle Artikel, die mit dem Klassennamen beginnen

Question

Ich versuche, nur bestimmte div s zu zeigen. Die Art, wie ich mich dazu entschieden habe, ist, zuerst alle Elemente auszublenden, die mit "page" beginnen und dann nur die korrekten div s anzeigen. Hier ist meine (vereinfacht) Code:

<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> 

Als ich console.log(items); ich eine leere Array erhalten. Ich bin mir ziemlich sicher, dass die Regexp richtig ist (alle Artikel beginnen mit 'Seite'). Der Code, den ich verwende, ist Old School JS, aber ich bin nicht abgeneigt, jQuery zu verwenden. Auch wenn es eine Lösung gibt, die regexp nicht verwendet, ist das auch in Ordnung, da ich neu mit regexp's bin.

Answer 1

getElementsByClassName nur auf Klassen entspricht, nicht Bits von Klassen. Sie können ihm keinen regulären Ausdruck übergeben (Sie können das, aber es wird in eine Zeichenfolge konvertiert, was nicht hilfreich ist).

Der beste Ansatz ist es, mehrere Klassen zu verwenden ...

<div class="page page1"> 

d Dieses div eine Seite ist, es ist auch ein page1.

Dann können Sie einfach document.getElementsByClassName('page').

---

dass Andernfalls können Sie auf querySelector suchen und ein substring matching attribute selector:

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

... aber das wird nur funktionieren, wenn pageSomething der Name in der Klasse Attribute ersten aufgeführt Klasse.

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

... aber das wird Klassenattribute entsprechen, die „Seite“ und nicht nur diejenigen mit Klassen erwähnen, die mit „Seite“ beginnen (dh es wird class="not-page" entsprechen.

Das heißt, könnten Sie die letzte verwenden nähern und dann über .classList Schleife, um zu bestätigen, ob das Element übereinstimmen sollte.

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

Sie können nicht RegExp in einem Selektor
verwenden, aber Sie können use Document.querySelectorAll() und als 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>

Zusätzlich falsch-positive Ergebnisse zu verhindern (wie zum Beispiel: class="row pageCool") abgestimmt ist, können Sie könnte versuchen, mit Ihren Selektoren spezifischer zu sein, wie zB: eine Elternidentifikation hinzufügen ...

...rAll("#togglablePagesParent [class*=page]") 

Answer 3

Sie jQuery-Lösung verwenden können ..

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

Dadurch werden alle divs erhalten, die mit Klassennamen beginnen page

Answer 4

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

Verwenden Sie diese ausblenden divs mit spezifischen CSS-Klasse zeigen, es zeigen/verstecken alle divs mit CSS-Klasse zu erwähnen.