jQuery - pobierz listę wartości atrybutu z elementów klasy

86

Mam klasę, .objectktóra ma atrybut o nazwie level. Chcę uzyskać listę wszystkich różnych wartości levelna stronie, abym mógł wybrać najwyższą.

Jeśli zrobię coś takiego:

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

... czy to da mi listę wartości, które są wartościami atrybutu level? Podejrzewam, że nie, ale w takim razie jak robisz coś takiego?

Uwaga: nie chcę wybierać obiektu HTML do manipulacji, jak to jest bardziej powszechne, raczej chcę wybrać wartości atrybutu.

EDYCJA: Aby uzyskać najwyższy „poziom”, zrobiłem to, ale wydaje się, że nie działa. Spróbuję teraz innej sugerowanej metody.

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

alert(highLevel);
Ankur
źródło
5
@Ankur, powinieneś wybrać jedną z nich jako odpowiedź na to pytanie
Nathan Koop

Odpowiedzi:

195

$(".object").attr("level")po prostu zwróci atrybut pierwszego pierwszego .objectelementu.

W ten sposób otrzymasz tablicę wszystkich levels:

var list = $(".object").map(function(){return $(this).attr("level");}).get();
Kobi
źródło
6
Co to .get()robi?
Yuji 'Tomita' Tomita
21
@Yuji - getkonwertuje obiekt jQuery na zwykłą tablicę.
Kobi
@MandeepJain: Jak oznaczyć odpowiedź jako „poprawną”? Ten może nie został oznaczony jako „zaakceptowany”, ale ponad 100 osób uznało go za „użyteczny” i to mi wystarczy!
Michael Scheper
1
Świetna odpowiedź. Trochę bardziej intuicyjny / czystszy jest dla mnie .get()najpierw tablica, a następnie użyj .map()funkcji strzałki plus (obsługa przeglądarki: caniuse.com/#search=arrow ), aby zbudować tablicę za pomocą prostego 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>

Zakładam, że znaczniki są takie:

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

W przypadku mojego kodu otrzymuję powiadomienie o wartości „1000”.

Oto inne rozwiązanie, łączące kilka innych odpowiedzi z harpo, lomaxx i 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
źródło
2

selektor

$(".object[level]")

poda wszystkie elementy dom z klasą objecti atrybutem level.

Następnie możesz po prostu użyć metody .each (), aby iterować po elementach, aby uzyskać najwyższą wartość

lomaxx
źródło
$(".object[level=something]") gdzie coś jest wartością atrybutu, której szukasz
James
0

Możesz rozszerzyć funkcjonalność Jquery i dodać własną implementację attrów.

Dodaj następujące wiersze kodu do pliku JavaScript:

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

Teraz możesz uzyskać listę wartości poziomów, dzwoniąc:

$(".object").attrs("level")
Albert Waninge
źródło