0

我的表的<td>s 包含多个类。我需要找到每个<td>包含给定字符串的内容。
例如： 

<table>
    <tr>
        <td class="hello there">foo</td>
        <td class="hello here">bar</td>
        <td class="not hello">baz</td>
    </tr>
</table>

我需要找到每个包含“hello”的 td。
可以做到吗？简单className ==只会返回完全匹配。当然。

4

8 回答 8

3

这就是getElementsByClassName：

document.getElementsByClassName('hello');

这将选择任何具有 class 的元素hello。

注意：该class属性包含一个空格分隔的类名列表。

如果您需要支持 IE8 及以下版本，请使用以下命令：

var elements = document.getElementsByTagName("td"),
    helloElements = [],
    i = elements.length;

for (i--) {
    if ( ~(' ' + elements[i].className + ' ').indexOf(' hello ') ) {
        helloElements.push(elements[i]);
    }
}

这是一个演示：http: //jsfiddle.net/AJEsp/

根据@mplungjan 的建议，这里是按位波浪号 (~) 技巧的简短说明：

该indexOf函数返回一个整数，其中包含找到的子字符串的位置，因此'abc'.indexOf('b')将 return 1，'abc'.indexOf('c')将 return 2，依此类推。如果未找到子字符串，它将返回-1.

该~字符是位运算符之一，它会反转所有位。回避这究竟是如何发生的复杂问题，我们现在只需要知道return ，而在其他任何东西上使用波浪号都会~-1返回一个真实值。0

因此，~'str'.indexOf('substring')可以将其视为是否找到子字符串的布尔值。

于 2012-10-28T19:13:45.747 回答
2

使用这样的东西：

var tds = document.getElementsByTagName("td");

for (var i = 0; i < tds.length; i++) {
    var cur = tds[i];
    var the_class = cur.className;
    if (the_class.split(" ").indexOf("hello") > -1) {
        // cur has the class "hello"
    }
}

不过还有其他解决方案。

您可以使用.classList尚未完全支持的属性 - https://developer.mozilla.org/en-US/docs/DOM/element.classList。

您可以使用document.getElementsByClassName- https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName。

您可以使用document.querySelectorAll- https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll。

var td_with_class = document.querySelectorAll("td.hello");
于 2012-10-28T19:14:28.537 回答
1

class="hello there"表示 td 有两个类，hello并且there.

所以你可以使用

var elements = document.getElementsByClassName('hello');
于 2012-10-28T19:14:41.677 回答
1 
var tds = document.getElementsByTagName('td'),
    filtered = [];
for (var i = 0; i < tds.length; i++){
  if (tds[i].className.match(/\bhello\b/i)){
    filtered.push(tds[i]);
  }
}

使用RegExpmatch 和\b符号将 tds 与指定的类匹配。或者，您可以从 class 开始向后过滤并按以下方式过滤tagName：

var hellos = document.getElementsByClassName('hello'),
    filtered = [];
for (var i = 0; i < hellos.length; i++){
  if (hellos[i].tagName == 'TD'){
    filtered.push(hellos[i]);
  }
}
于 2012-10-28T19:15:32.080 回答
0

https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

获取同时具有 'red' 和 'test' 类的所有元素

document.getElementsByClassName('red test');

并将其限制在某个节点：

查找所有具有“测试”类的 div 元素

var tests = Array.prototype.filter( document.getElementsByClassName('test'), function(elem){
    return elem.nodeName == 'TD';
});
于 2012-10-28T19:14:36.680 回答
0

一般的解决方案是通过标记名（“td”）获取所有项目。遍历每个项目并确定 hello 是否是类属性的子字符串。如果您需要代码，请告诉我！

于 2012-10-28T19:15:08.993 回答
0

令人惊讶的是，没有人建议使用 jQuery hasClass

要不就

var allHello = $("td.hello");
于 2012-10-28T19:23:06.617 回答
0

有财产.classList。

elem.classList.contains( 'hello' )

返回元素是否包含"hello"类。

现场演示：http: //jsfiddle.net/E7jMt/1/

.classList在所有浏览器中实现（截至两天前），但在旧版本的 os IE（<10）中没有实现。

于 2012-10-28T20:03:24.327 回答