1

data-event 属性に基づいて要素を選択する方法はありますか?

ここに私が持っているものがあります:

<button data-event="5456293788" class="id-button-yes greenBtn list-buy-buttons">Buy now!</button>

次のようなものを探しています：

document.getElementByDataEvent('5456293788')

可能？

4

4 に答える 4

1

属性セレクターは思い浮かびますが、それを使用するために jQuery は必要ありません。
ただし、古いブラウザでは動作しない可能性があります。

getElementsByDataEvent本当に必要な場合は、オブジェクトに a を追加できdocumentます (すべてのブラウザーでこれが許可されているかどうかはわかりません)。

document.getElementsByDataEvent = function(dataEvent)
{
    return document.querySelectorAll('[data-event="'+dataEvent+'"]');
};

しかし、ご覧のとおり、querySelectorAll呼び出しの戻り値を返すだけなので、これは少し不要です。さらに、querySelectorAll直接使用すると、次のようなことができます

document.querySelectorAll('a[data-event="foo"]');//only links will be retured
//or, with some other data-* thing, along the lines of:
document.querySelectorAll('[class="greenBtn"]');
于 2013-04-16T17:49:41.690 に答える
1

このようなもの？

document.querySelector("button[data-event='5456293788']");

JSFiddleで見る

非常に幅広いブラウザをサポートしています（IE 8でもサポートしています）

于 2013-04-16T17:49:06.327 に答える
1

属性セレクターを使用する

http://jsfiddle.net/QTNzf/

JS

document.querySelector('button[data-event="5456293788"]' );

CSS

button[data-devent="5456293788"] {
      background-color: #eee;
}
于 2013-04-16T17:47:57.227 に答える
1

jQuery で属性 equals セレクターを使用します。

$('[data-event="5456293788"]')

またはでdocument.querySelectorAll：

document.querySelectorAll('[data-event="5456293788"]');

下位互換性のために、属性値をチェックするすべての要素を反復処理する必要があります。これは、jQuery などのライブラリが本当に役立つケースです。

下位互換性のある raw js:

function getElementsByAttr(attr, val) {
    var nodes,
        node,
        i,
        ret;
    val = '' + val;
    nodes = document.getElementsByTagName('*');
    ret = [];
    for (i = 0; i < nodes.length; i += 1) {
        node = nodes[i];
        if (node.getAttribute(attr) === val) {
            ret.push(node);
        }
    }
    return ret;
}
de = getElementsByAttr('data-event', '5456293788');
于 2013-04-16T17:48:39.903 に答える