Получить все элементы, которые начинаются с имени класса

Question

Я пытаюсь показать только div s. То, как я решил это сделать, - сначала скрыть все элементы, которые начинаются с «страницы», а затем показывать только правильные div. Вот мой (упрощенный) код:

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

Когда я console.log(items); я получаю пустой массив. Я уверен, что регулярное выражение является правильным (получить все элементы, начиная с «страницы»). Код, который я использую, это старая школа JS, но я не против использования jQuery. Также, если есть решение, которое не использует regexp, это тоже хорошо, поскольку я новичок в использовании regexp's.

Answer 1

getElementsByClassName соответствует только по классам, а не биты классов. Вы не можете передать ему регулярное выражение (ну, вы можете, но он будет преобразован в строку, что бесполезно).

Лучший подход заключается в использовании нескольких классов ...

<div class="page page1"> 

т.е. Этот DIV является страницей, это также стр.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 внутри селектора
но вы можете 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>

Кроме того, для предотвращения ложных срабатываний (например, а именно: class="row pageCool"), совпадающим, вы может быть более конкретным, используя ваши селекторы, например: добавление родительского идентификатора ...

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

Answer 3

Вы можете использовать решение JQuery ..

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

Это позволит получить все дивы, которые начинаются с имени класса page

Answer 4

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

Используйте это, чтобы показать, скрыть DIV с определенным классом CSS будет показать/скрыть все DIV с классом CSS упоминанием.