Sınıf adı

Question

ile başlayan tüm öğeleri al Sadece div s modellerini göstermeye çalışıyorum. Bunu yapmaya karar verdiğim ilk önce "sayfa" ile başlayan tüm öğeleri gizlemek ve daha sonra sadece doğru div s göstermektir. İşte benim (basitleştirilmiş) kod:

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

Ben console.log(items); ben boş dizi olsun

. Regexp'nin doğru olduğundan eminim ('sayfadan başlayarak tüm öğeleri alın). Kullanmakta olduğum kod eski okul JS'dir, ancak jQuery'yi kullanmam konusunda olumsuz değilim. Ayrıca regexp kullanmayan bir çözüm varsa, regexp kullanmanın yeni olmasından da iyidir. Eğer, eşleştirilerek:

Answer 1

getElementsByClassName sadece sınıfların değil sınıfların bitleri maçları sınıfadı ile başlayan tüm div'leri alacak. Ona düzenli bir ifade iletemezsin (iyi yapabilirsin, ama bir diziye dönüştürülemez, bu da yararsızdır).

iyi yaklaşım aynı zamanda bir page1 olduğunu

<div class="page page1"> 

Bu div bir sayfadır yani ... Birden sınıfları kullanmaktır.

Ardından sadece document.getElementsByClassName('page'). Bu gerçekleşmediği takdirde

---

, sen querySelector bakmak ve bir substring matching attribute selector edebilirsiniz:

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

... ama pageSomething sınıf özelliğinde ilk listelenen sınıf adı ise sadece çalışacaktır.

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

... ama bu "sayfa" söz ve sadece "sayfa" ile başlayan hangi sınıflar olanlar (yani o class="not-page" maç olacak değil sınıf özelliklerini eşleşir. Söyleyen

, dün kullanabilirsiniz yaklaşım ve sonra öğenin eşleşmesi gerektiğini doğrulamak için .classList üzerinden döngü.

Answer 2

Bir selektör
içeride RegExp kullanamazsınız, ancak (class="row pageCool" yani gibi) yapabilirsiniz use Document.querySelectorAll() ve daha 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>

Ayrıca, yanlış-pozitif önlemek için seçmenler gibi ie kullanarak daha spesifik olmaya çalışabilir: bir üst kimlik ekleme ...

JQuery çözümü kullanabilirsiniz

Answer 3

..

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

Bu page

Answer 4

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

bunu kullanın

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>

o css sınıfı anma ile tüm div 's/gizlemek olacak spesifik css sınıfı ile gizlemek div' s göstermek için.