4

jQuery 経由で HTML-5 データ属性を取得したいと考えています。

だから、私は使用して.data()います。

複数のデータ属性をフェッチする必要があるため、パラメーターを指定して結果をキャッシュしていません。

var data = $('myselecttor').data()

しかし問題は.data()、HTML-5 属性をフェッチするだけでなく、jquery (内部使用) または他のプラグイン (私の場合は jquery-ui) によって設定されたデータストア値もフェッチすることです。

Demo

すべての HTML-5 データ属性 (data-store 値を除く) を 1 回の呼び出しで (個別ではなく) 取得する必要があります。

ps でこれdata()を送信する$.ajaxとUncaught TypeError: Illegal invocationエラーが発生します。

私はそれが誰かを助けることを願っています。

私の解決策

最後に、すべてのデータ属性を 1 つのデータ属性に json として保存しています。jQuery は、data-attribute 内の任意の json を自動的に解析することで、これを支援します。

<div data-person='{"name": "jashwant","sex": "male"}'></div>

そして、JavaScriptで次のようにアクセスできます

 var person =  $('div').data('person');
 console.log(person.name);  // jashwant
 console.log(person.sex);   // male

唯一の問題は、次のような css セレクターを使用できないことです。[data-name="jashwant"]

4

3 に答える 3

2

おそらく属性自体を見ることができますが、要素のdataset.

var data = $('div').draggable().get(0).dataset;

http://jsfiddle.net/DprgS/1/

于 2013-03-11T18:40:32.127 に答える
2

あなたはこれを試すことができます

(function($) {
    $.fn.getDataAttr = function() {
        var attributes = {}; 
        if( this.length ) {
            $.each( this[0].attributes, function( i, attr ) {
                if( attr.name.substr(0,5) =='data-' )
                    attributes[ attr.name ] = attr.value;
            } ); 
        }
        return attributes;
    };
})(jQuery);

使用する

var data = $('div').draggable().getDataAttr();
console.log(data); // {data-name: "jashwant", data-sex: "male"}

デモ。

于 2013-03-11T19:23:05.617 に答える
0

さらにオプションをいくつか：

データ属性の名前空間

<div id="mydiv" data-jashwant-name="jashwant" data-jashwant-sex="male">Drag me</div>

次に、ループして自分のものだけを選択します

for (var i in data) {
  if (i.indexOf('jashwant') > -1 ) { 
    console.log(i + " : " + data[i]);
  }
}

または...信頼性は低くなりますが、このシナリオでは機能する可能性があります。値が文字列のデータ属性のみを選択します (jquery UI オブジェクトを無視します)。

for (var i in data) {
  if (typeof data[i] === "string" ) { 
    console.log(i + " : " + data[i]);
  }
}
于 2013-03-11T19:07:14.967 に答える