0

私のテーブル<td>には複数のクラスが含まれています。指定された文字列を含むすべてを見つける必要があり<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')が返さ1れ、'abc'.indexOf('c')が返さ2れます。部分文字列が見つからない場合は、 が返され-1ます。

~文字は、すべてのビットを反転するビット演算子の1つです。これが正確にどのように発生するかという複雑な問題を回避するために、今知っておく必要があるのは、 が~-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 に 2 つのクラスがあることを意味し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 と記号を使用して、 \btds をその指定されたクラスと一致させます。または、クラスから開始して次のようにフィルタリングすることで、逆方向にフィルタリングすることもできます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

プロパティがあり.classListます。

elem.classList.contains( 'hello' )

要素に"hello"クラスが含まれているかどうかを返します。

ライブデモ： http： //jsfiddle.net/E7jMt/1/

.classListすべてのブラウザ（2日前現在）に実装されていますが、古いバージョンのOS IE（<10）には実装されていません。

于 2012-10-28T20:03:24.327 に答える
0

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

'red' クラスと 'test' クラスの両方を持つすべての要素を取得します

document.getElementsByClassName('red test');

特定のノードに制限するには:

「test」のクラスを持つすべての div 要素を検索します

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

驚くべきことに、誰もjQuery hasClassを提案しませんでした

あるいは単に

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

一般的な解決策は、すべてのアイテムをタグ名 ("td") で取得することです。各項目を繰り返し処理し、hello がクラス属性の部分文字列かどうかを判断します。コードが必要な場合はお知らせください。

于 2012-10-28T19:15:08.993 に答える