jQuery - obtém uma lista de valores de um atributo de elementos de uma classe

86

Eu tenho uma classe .objectque tem um atributo chamado level. Quero obter uma lista de todos os diferentes valores de levelna página para poder selecionar o mais alto.

Se eu fizer algo como:

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

... isso me dará uma lista de valores que são os valores do atributo de nível? Eu suspeito que não, mas então como você faz algo assim?

Nota: Não quero selecionar um objeto HTML para manipulação, como é mais comum, em vez disso, quero selecionar valores do atributo.

EDITAR: A fim de obter o "nível" mais alto, fiz isso, mas não parece funcionar. Vou tentar o outro método sugerido agora.

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

alert(highLevel);
Ankur
fonte
5
@Ankur você deve selecionar um destes como a resposta a esta pergunta
Nathan Koop

Respostas:

195

$(".object").attr("level")retornará apenas o atributo do primeiro .objectelemento.

Isso fornecerá a você uma matriz de todos os levels:

var list = $(".object").map(function(){return $(this).attr("level");}).get();
Kobi
fonte
6
O que o .get()faz?
Yuji 'Tomita' Tomita
21
@Yuji - getconverte o objeto jQuery em um array regular.
Kobi,
@MandeepJain: Como alguém marca uma resposta como 'correta'? Este pode não ter sido marcado como 'aceito', mas mais de 100 pessoas o votaram como 'útil', e isso é bom o suficiente para mim!
Michael Scheper
1
Ótima resposta. Um pouco mais intuitivo / limpo para mim é .get()a matriz primeiro, em seguida, use a .map()função de seta mais (suporte para navegador: caniuse.com/#search=arrow ) para construir a matriz com um pouco de javascript simples:$(".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>

Estou assumindo uma marcação como esta:

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

Para o meu código, recebo um alerta de "1000".

Aqui está outra solução, combinando várias das outras respostas de harpo, lomaxx e 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);
});
Artlung
fonte
2

o seletor

$(".object[level]")

lhe dará todos os elementos dom com classe objecte um atributo level.

Em seguida, você pode apenas usar o método .each () para iterar os elementos e obter o valor mais alto

lomaxx
fonte
$(".object[level=something]") onde algo é o valor de atributo que você está procurando
Tiago
0

Você pode estender a funcionalidade do Jquery e adicionar sua própria implementação de 'atributos'.

Adicione as seguintes linhas de código ao seu arquivo JavaScript:

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

Agora você pode obter a lista de valores de nível chamando:

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