動的な「各」関数にどのように静的変数を使用しますか？

Question

私は、変数を作成しようとしています：

var numId = $('h3.pag').attr('class').match(/\d+/)[0]; 

この変数は私のhtmlからのすべてのh3.pagを取得し、それらの一つ一つが持つ番クラスから番号を抽出することになっている：pag1、pag2、pag3 ...等々。

私は、次のコードでは、この数字を使用します。私が達成したいことは、私のh3 Sの各1の数を抽出し、それを適用するためにそれらを使用できるようにすることです、要するに

$("h3.pag"+numId).each(function() { 
    document.styleSheets[0].addRule('h3.pag'+numId+'::before','content: "TEST";'); 
}); 

それぞれのCSSルール。

今のところ、コードはFIRST h3にのみ影響しています。私は、変数は静的なので、それは最初のh3で停止し、値を保持すると思います。これをどうやって起こさせるのですか？

Answer 1

あなたが "PAG" で始まるすべてのh3年代取得するのstartsWith attribute selectorを使用することができます：h3[class^=pag]をして、現在の項目のクラス名から数を解析：

$("h3[class^=pag]").each(function() { 
 
    // get the number out of the current class name 
 
    var num = this.className.match(/pag([\d]+)/)[1]; 
 
    document.styleSheets[0].addRule('h3.pag'+num+'::before','content: "TEST with JS - ";'); 
 
});

h3[class^=pag]::after { 
 
    content: ' - accomplished with css alone'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <h3 class="pag1">Page 1</h3> 
 
    <h3 class="pag2">Page 2</h3> 
 
    <h3 class="pag3">Page 3</h3>

この特定のユースケースでは、私が::afterの規則で実証したようにCSSを使うことができますが、