Question

我正在尝试创建一个变量：

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

这个变量应该从我的html中获取每个h3.pag并从编号的类中提取数字，每个数字都包含：pag1，pag2，pag3。 ..等等。

我将在以下代码中使用此数字：

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

简而言之，我想要完成的是能够提取每个h3的数量并使用它们为每一个应用CSS规则。

目前，代码仅影响FIRST h3。我认为该变量是静态的，因此它在第一个h3上停止并保留该值。我该如何实现这一目标？

Answer 1

您可以使用startsWith attribute selector获取以“pag”开头的所有h3：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规则

进行了演示

如何将静态变量用于动态“每个”函数？

1 个答案: