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


86

J'ai une classe .objectqui a un attribut appelé level. Je souhaite obtenir une liste de toutes les différentes valeurs de levelsur 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 soupçonne que non, mais alors comment faire quelque chose comme ça?

Remarque: je ne veux pas sélectionner un objet HTML pour la manipulation comme c'est plus courant, je veux plutôt sélectionner les valeurs de l'attribut.

EDIT: Afin d'obtenir le plus haut "niveau", j'ai fait cela, mais cela ne semble pas fonctionner. J'essaierai maintenant l'autre méthode suggérée.

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

alert(highLevel);

5
@Ankur, vous devriez en sélectionner une comme réponse à cette question
Nathan Koop

Réponses:


195

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

Cela vous donnera un tableau de tous les levels:

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

6
Que fait le .get()?
Yuji 'Tomita' Tomita

21
@Yuji - getconvertit l'objet jQuery en un tableau régulier.
Kobi

@MandeepJain: Comment marquer une réponse comme «correcte»? Celui-ci n'a peut-être pas été marqué comme «accepté», mais plus de 100 personnes l'ont voté «utile», et c'est assez bien pour moi!
Michael Scheper

1
Très bonne réponse. Un peu plus intuitif / plus propre pour moi est d'abord .get()le tableau, puis utilisez la .map()fonction de flèche plus (prise en charge du navigateur: caniuse.com/#search=arrow ) pour créer le tableau avec un peu de javascript:$(".object").get().map(x => x.getAttribute('level'));
elPastor


3
<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 un balisage comme celui-ci:

<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 une alerte "1000".

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

2

le sélecteur

$(".object[level]")

vous donnera tous les éléments dom avec une classe objectet un attribut level.

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


$(".object[level=something]") où quelque chose est la valeur d'attribut que vous recherchez
James

0

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")
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.