如何为动态“每个”功能使用静态变量？

Question

我试图创建一个变量：

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

这个变量应该让每一个h3.pag从我的HTML和编号类他们每个人都有提取号码：pag1，pag2，pag3 ...等等。

我将在下面的代码中使用此号码：

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

总之，我要做到的是要能提取我h3 S的每一个的数量，并利用它们来应用CSS规则为他们中的每一个。

现在，代码仅影响FIRST h3。我想这个变量是静态的，所以它停在第一个h3并保持这个值。我如何做到这一点？

Answer 1

可以使用startsWith attribute selector让所有h3的以 “PAG” 开始：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>

虽然对于这个特定的用例，您可以使用CSS，因为我使用了我的::after规则