12

あたり、

HTML要素のすべての属性を反復処理するにはどうすればよいですか？

一般的な解決策が得られます。

for (var i = 0; i < elem.attributes.length; i++) {
  var attrib = elem.attributes[i];
  if (attrib.specified) {
    alert(attrib.name + " = " + attrib.value);
  }
}

data-属性の値のみをアラートするために、この一般的なソリューションをより具体的にするにはどうすればよいですか。

attrib.nameを正規表現する必要がありますか、それとももっと簡単な方法がありますか？次に、2つのデータ属性を持つサンプルHTMLを示します。

<div id='universals' data-path='/zz/' data-load='1'></div>
4

5 に答える 5

22

dataset以下のIEが必要ない場合、サポートは非​​常に優れていますversion 11

データセットプロパティの単純な「for-in」反復：

var dataset = document.querySelector('div').dataset;

for( var d in dataset)
   console.log(d, dataset[d])
<div data-foo='1' data-bar='2'></div>

于 2017-03-25T21:10:46.223 に答える
6

最近の多くのブラウザでは.dataset、オブジェクトのメンバーを介してこれらの特別な属性にアクセスできNodeます。残念ながら、これはまだ受け入れられている標準ではないため、これがすべてのスペクトルで採用されているとは思われません。幸い、すべての主要なブラウザで部分的getAttributeにサポートされており、これらの属性には、などの一般的な方法を使用したり、リストを循環したりしてアクセスできます.attributes。

以下のコードは、2番目の方法を示しています。

// Reference to our element
var element = document.getElementById("universals"), attr;

// Cycle over each attribute on the element
for (var i = 0; i < element.attributes.length; i++) {
    // Store reference to current attr
    attr = element.attributes[i];
    // If attribute nodeName starts with 'data-'
    if (/^data-/.test(attr.nodeName)) {
        // Log its name (minus the 'data-' part), and its value
        console.log(
            "Key: " + attr.nodeName.replace(/^data-/, ''),
            "Val: " + attr.nodeValue
        );
    }
}

フィドル： http： //jsfiddle.net/pGGqf/14/

このアプローチは、IE6までさかのぼって、すべての主要なブラウザーで機能することがわかります。.datasetこれも、メンバーをサポートするブラウザーでは必要ありません。オブジェクトには少し追加の機能が用意されている.datasetので、必要に応じて自由に機能を検出できます。

if (element.dataset) {
    // Browser supports dataset member
} else {
    // Browser does not support dataset member
}
于 2012-12-26T21:30:24.877 に答える
6 
_dataToObject = function( dataset ) {
    return Object.keys( dataset ).reduce( function( object, key ) {
        object[ key ] = dataset[ key ]; 
        return object;
    }, {});
}
于 2015-10-04T18:48:34.547 に答える
1

正規表現を使用したくない場合は、試すことができます

if attrib.name.startswith('data'):
    //do something
于 2012-12-26T21:32:08.343 に答える
-1

私はあなたのために働くかもしれないここに概念を持っています。

var el = document.getElementById("universals");
for(var i=0;i<el.attributes.length;i++){
    if((el.attributes[i].nodeName+"").indexOf("data-")>-1){
        var key=(el.attributes[i].nodeName+"").substring(5);
        var value=el.attributes[i].value;
        alert(key+": "+value);
    }
}

これは私が思いついた基本的な考え方であり、かなりうまくいくようです。上記のメソッドを使用して、HTMLElementsの「data」属性からName-Value-Pairオブジェクトを返す関数も作成しました。

function data2Obj(id){
  var obj={};
  var el=document.getElementById(id);
  for(var i=0;i<el.attributes.length;i++){
    if((el.attributes[i].nodeName+"").indexOf("data-")>-1){
      var key=(el.attributes[i].nodeName+"").substring(5);
      var value=el.attributes[i].value;
      if(value.toLowerCase()=="true")value=true;
      else if(value.toLowerCase()=="false")value=false;
      else if((parseInt(value)+"")==value)value=parseInt(value);
      obj[key]=value;
    }
  }
  return obj;
}

これは、HTMLElementsを選択するためのクラスまたはその他のメソッドを受け入れるように簡単に変更できます。

この関数を返し、オブジェクトを反復処理すると、目的の結果が得られるはずです。

var datas = data2Obj("universal");
for(var k in datas){
  alert(k+": "+datas[k]);
}
于 2014-05-28T20:09:18.557 に答える