Question

听起来很简单，呵呵。我发现很多答案，但都使用jQuery或ProtoType。我想要简单的JavaScript。它不应该那么难，但JavaScript不是我的事;没有中央文件意味着寻找年龄而不是找到我想要的东西。

请考虑以下HTML代码段：

<div class="central_0"> .. </div>
<div class="central_1"> .. </div>
<div class="central_2"> .. </div>

现在我想使用JavaScript来处理这些DIV。

function processDivElements()
{
 // search for relevant DIV classes
 var divArray = document.getElementsByClass.regex('/^central_.*$/');

 // do stuff with the DIV elements found
 foreach (divArray as divElement)
 {
   divElement.style.background = '#f00';
 };
}

任何人都可以帮我翻译成正确的普通 JavaScript吗？我使用的是类，而不是ID。我更喜欢使用正则表达式。

Answer 1

jQuery解决方案真的很棒：

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

如果您只想支持较新的浏览器，可以使用document.querySelectorAll()执行基本相同的操作：

var divs = document.querySelectorAll('div[class^="central_"]');

如果您想支持旧版浏览器，代码会变得非常糟糕：

var all_divs = document.getElementsByTagName('div');
var divs = [];

for (var i = 0; i < all_divs.length; i++) {
    var div = all_divs[i];

    if (div.className.match(/^central_\d+$/) {
        divs.push(div);
    }
}

此外：

我使用的是课程，而不是ID。我更喜欢使用正则表达式。

您的类是唯一的，并且实际上像ID一样运行，这实际上不是类的预期用途。改为构建你的HTML：

<div id="central_0" class="central">...</div>
<div id="central_1" class="central">...</div>
<div id="central_2" class="central">...</div>

现在，JavaScript变得更简单了：

var $divs = $('.central');                               // jQuery
var divs =  document.querySelectorAll('.central');       // Newer browsers
var divs =  document.getElementsByClassName('central');  // Older browsers

Answer 2

正如其他人提到的那样，您无法直接支持getElementsByClassName方法调用上的正则表达式选择。

但是我会在你的代码中指出这些其他问题，因为你不熟悉javascript。

使用类很好，但是通过编写类似的html，你可以为自己做更多的工作。

而不是central_0....central_2如果它们基本上都在相同的css规则上运行，那么你应该像central zero....central two一样编写它们，然后你的central类可以有相同的规则，而你可以将任何差异分配给#类。这样你也坚持DRY principle。

此外，您应该考虑坚持使用该语言的最佳实践。如果您没有使用这些类为您的元素分配css规则，那么您应该使用id's，而且它会让您的生活更轻松。

Answer 3

没有办法直接通过正则表达式获取匹配的元素，你唯一能做的就是通过某些东西获取所有元素（比如：TagName，Name等），然后用正则表达式过滤元素。

使用您的html示例，您只能通过TagName获取所有元素，并使用正则表达式通过正则表达式检查className。

Answer 4

一种更快的方法是创建一个简单的<style>，如下所示：

<style>
    div[class^="central_"] {
        background-color: #f00;
    }
</style>

因此，当您寻找纯javascript 时，不用说您可以使用javascript随意添加<style>标签。完整的HTML示例如下：

<html>
<head>
</head>
<body>
    <div class= "central_1">
        central 1
    </div>

    <script>
        var css = "<style>div[class^=\"central_\"] {background-color: #f00;}</style>";
        var list = document.querySelector("head"); list.innerHTML += css;
    </script>

</body>
</html>

使用正则表达式搜索div类

4 个答案: