9

听起来很简单，嗯。我找到了很多答案，但都使用 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。我更喜欢使用正则表达式。

4

4 回答 4

13

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
于 2012-12-08T07:00:09.777 回答
2

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

但我会指出您的代码的这些其他问题，因为您是 javascript 新手。

使用类很好，但是通过像这样编写 html 来为自己做更多的工作。

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

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

于 2012-12-08T07:08:35.267 回答
1

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

使用您的 html 示例，您只能通过 TagName 获取所有元素，并使用 regex 来检查classNameby regex。

于 2012-12-08T07:01:47.783 回答
0

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

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

因此，当您寻找普通的 javascript时，不用说您可以<style>使用 javascript 随意添加标签。一个完整的 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>
于 2018-09-20T18:22:23.587 回答