web-dev-qa-db-ja.com

jQueryを使用して要素の属性を反復処理する

個々の属性はattr()メソッドで取得できることは知っていますが、要素の属性のallを反復しようとしています。コンテキストについては、いくつかのXMLでjQueryを使用しています...

_<items>
  <item id="id123" name="Fizz" value="Buzz" type="xyz">
    <subitem name="foo">
    <subitem name="bar">
  </item>
  <item id="id456" name="Bizz" value="Bazz" type="abc">
    <subitem name="meh">
    <subitem name="hem">
  </item>
</items>
_

私はすでにアイテムを繰り返し処理することができます...

_$(xml).find('item').each(function() {
  // Do something to each item here...
});
_

しかし、各「アイテム」の属性の配列を取得できるようにしたいので、それらを反復することができます...

例えば.

_$(xml).find('item').each(function() {
  var attributes = $(this).attributes(); // returns an array of attributes?
  for (attribute in attributes) {
    // Do something with each attribute...
  }
});
_

ここ、jQueryのドキュメント、およびGoogleを介して他の場所で検索を行いましたが、運がありませんでした。それ以外の場合は、jQueryオブジェクトのattr()メソッドに関連する結果を除外するだけで問題が発生する可能性があります。前もって感謝します。

jqueryxmldomtraversal
46
theraccoonbear

最良の方法は、attributesプロパティを使用してノードオブジェクトを直接使用することです。この方法を提案している他のソリューションと比較した私のソリューションの唯一の違いは、.each再び従来のjsループの代わりに：

$(xml).find('item').each(function() {
  $.each(this.attributes, function(i, attrib){
     var name = attrib.name;
     var value = attrib.value;
     // do your magic :-)
  });
});
103
prodigitalson

普通の古いバニラジャバスクリプトを使用する必要があるようです：

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

HTML要素内のすべての属性を反復処理する方法

10
Juraj Blahunka

Get（）関数を使用してjQueryラッパーからDOM要素を取得し、DOM属性を繰り返しますか？

var node = $(myStuff).get(0);
if (node.attributes.length) {

    for (var length = attrs.length, i = 0; i < length; i++) {
        if (attrs[i].specified) {

        }
    }
}

より堅牢なDOM属性処理については、 このブログ投稿を確認してください 。

4
womp

どう？

$(xml).find('item').each(function() {
  var attributes = $(this)[0].attributes;
  for (attribute in attributes) {
    // Do something with each attribute...
  }
});
1
Naeem Sarfraz

標準のDOM要素属性attributesのみを使用できますが、IE6ではevery属性（明示的に設定されていない属性も含む）が含まれます。別の方法として、設定する属性の数を制限できます。

var use_attributes = ['id','name','value','type'];
$(xml).find('item').each(function() {
  var $item = $(this);

  $.each( use_attributes, function(){
    if($item.attr( this )){
      // Act on the attribute here. 
      // `this` = attribute name
      // $item.attr( this ) = attribute value
    }
  })
});
1
Doug Neiner
function findByAll(toLookFor, lookInText) { 
    return $('*').filter(function() { 
        return Array.prototype.some.call(this.attributes, function(attr) {
            return attr.value.indexOf(toLookFor) >= 0; 
        }) || (lookInText && $(this).text().indexOf(toLookFor) >= 0); 
    }); 
}
1
shmulik friedman

私がここに投稿しているのは、この投稿に到着した他の人が私と同じようにxmlファイルを解析しようとしているのを助けるかもしれないからです。

私はtheracoonbearのファイルに非常に似た構造を持つxmlファイルを走査し、結果を配列に保存する方法を探していましたが、この投稿に出くわしました。

私はprodigitalsonのコードを見ましたが、この構文を機能させることができませんでした。

 $.each(this.attributes, function(i, attrib){

それ

this.attributes

定義された関数ではありません。 エラーは完全に私のものであると確信しています。しかし、私はこれを機能させるために数時間を費やし、失敗しました

私のために働いたのは（私のタグ名がアイテムではなくセッションである場合）でした：-

$(xml_Data).find("session").each(function() {
    console.log("found session");
    $(this).children().each(function(){
     console.log("found child " + this.tagName);
     console.log("attributes" + $(this).text());
    });
});

これが元の質問に正確に答えない場合があることを感謝します。ただし、他の訪問者がこの投稿を少しでも節約できることを願っています。

よろしく

1
codepuppy