web-dev-qa-db-fra.com

jQuery - obtient une liste de valeurs d'un attribut à partir d'éléments d'une classe

J'ai une classe .object qui a un attribut appelé level. Je souhaite obtenir une liste de toutes les valeurs différentes de level sur la page afin de pouvoir sélectionner la plus élevée.

Si je fais quelque chose comme:

$(".object").attr("level")

... cela me donnera-t-il une liste de valeurs qui sont les valeurs de l'attribut level? Je suppose que non, mais alors comment faites-vous quelque chose comme ça?

Remarque: Je ne souhaite pas sélectionner un objet HTML à manipuler comme c'est plus courant, mais plutôt des valeurs de l'attribut.

EDIT: Afin d’obtenir le "niveau" le plus élevé, j’ai fait cela, mais cela ne semble pas fonctionner. Je vais essayer l'autre méthode suggérée maintenant.

var highLevel=0;
$.each(".object[level]", function(i, value) {
   if (value>highLevel) {
       highLevel=value;
   }
});

alert(highLevel);
jquerycss-selectors
76
Ankur

$(".object").attr("level") renverra simplement l'attribut du premier élément .object.

Cela vous donnera un tableau de tous les levels:

var list = $(".object").map(function(){return $(this).attr("level");}).get();
174
Kobi

Première partie de la question, obtenir les valeurs d'attribut dans un tableau. Voir cette question

jQuery obtient les attributs source img de la liste et de la poussée dans un tableau

Tu dirais

var levelArray = $('.object').map( function() {
    return $(this).attr('level');
}).get();

Deuxième partie de la question, vous pouvez utiliser cette technique pour obtenir la valeur la plus élevée

var maxValue = Math.max.apply( Math, levelArray );
26
harpo
<script type="text/javascript"> 
var max = 0;
jQuery(document).ready(function(){ 
    jQuery('.object[level]').each(function(){
        var num = parseInt($(this).attr('level'), 10);
        if (num > max) { max = num; }
    });
    alert(max);
});
</script>

Je suppose que le balisage ressemble à ceci:

<div class="object" level="1">placeholder</div>
<div class="object" level="10">placeholder</div>
<div class="object" level="20">placeholder</div>
<div class="object" level="1000">placeholder</div>
<div class="object" level="40">placeholder</div>
<div class="object" level="3">placeholder</div>
<div class="object" level="5">placeholder</div>

Pour mon code, je reçois "1000" alerté.

Voici une autre solution, combinant plusieurs des autres réponses de harpo, lomaxx et Kobi:

jQuery(document).ready(function(){ 
    var list = $(".object[level]").map(function(){
        return parseInt($(this).attr("level"), 10);
    }).get();
    var max = Math.max.apply( Math, list ); 
    alert(max);
});
3
artlung

le sélecteur

$(".object[level]")

vous donnera tous les éléments dom avec la classe object et un attribut level.

Ensuite, vous pouvez simplement utiliser la méthode .each () pour parcourir les éléments et obtenir la valeur la plus élevée.

2
lomaxx

Vous pouvez étendre les fonctionnalités de Jquery et ajouter votre propre implémentation 'attrs'.

Ajoutez les lignes de code suivantes à votre fichier JavaScript:

jQuery.fn.extend({
    attrs: function (attributeName) {
        var results = [];
        $.each(this, function (i, item) {
            results.Push(item.getAttribute(attributeName));
        });
        return results;
    }
});

Vous pouvez maintenant obtenir la liste des valeurs de niveau en appelant:

$(".object").attrs("level")
0
Albert Waninge