web-dev-qa-db-fra.com

Itération sur les attributs d'élément avec jQuery

Je sais que les attributs individuels peuvent être récupérés avec la méthode attr(), mais j'essaie d'itérer sur tous les attributs d'un élément. Pour le contexte, j'utilise jQuery sur du XML ...

<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>

Je peux déjà parcourir les éléments avec ...

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

Mais j'aimerais pouvoir obtenir un tableau d'attributs pour chaque `` élément '' afin que je puisse ensuite répéter ceux-ci ...

par exemple.

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

J'ai fait quelques recherches ici, dans la documentation jQuery, et ailleurs via Google mais je n'ai pas eu de chance. Si rien d'autre, j'ai peut-être du mal à exclure les résultats relatifs à la méthode attr() de l'objet jQuery. Merci d'avance.

jqueryxmldomtraversal
46
theraccoonbear

La meilleure façon est d'utiliser directement l'objet nœud en utilisant sa propriété attributes. La seule différence dans ma solution ci-dessous par rapport aux autres suggérant cette méthode est que j'utiliserais .each à nouveau au lieu d'une boucle js traditionnelle:

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

il semble que vous devez utiliser le vieux javascript de Vanilla:

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

Comment parcourir tous les attributs d'un élément HTML?

10
Juraj Blahunka

Pourriez-vous obtenir l'élément DOM à partir du wrapper jQuery à l'aide de la fonction get (), puis itérer les attributs DOM?

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

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

        }
    }
}

Pour une gestion des attributs DOM beaucoup plus robuste, consultez cet article de blog .

4
womp

Que diriez-vous?

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

Bien que vous puissiez simplement utiliser l'attribut d'élément DOM standard attributes, il inclura l'attribut every (même ceux qui ne sont pas définis explicitement) dans IE6. Vous pouvez également limiter le nombre d'attributs que vous définissez:

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

Je poste ici parce que je pense que cela peut aider d'autres personnes qui arrivent à cette publication à chercher à analyser un fichier xml comme je l'étais.

Je cherchais une méthode pour parcourir un fichier xml avec une structure très similaire à celle de theracoonbear et stocker les résultats dans un tableau et suis tombé sur cette publication.

J'ai regardé le code de prodigitalson mais je n'ai tout simplement pas pu faire fonctionner cette syntaxe - avec firefox se plaignant que dans la ligne:

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

cette

this.attributes

n'est pas une fonction définie. Je suis sûr que l'erreur est entièrement la mienne. Mais j'ai passé plusieurs heures à essayer de faire fonctionner cela et j'ai échoué

Ce qui a fonctionné pour moi était (où mon nom de tag est session au lieu de l'élément): -

$(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());
    });
});

J'apprécie que cela ne réponde pas exactement à la question d'origine. Cependant, j'espère que cela pourra faire gagner du temps aux autres visiteurs de ce message.

Cordialement

1
codepuppy