jQuery: obtén una lista de valores de un atributo de los elementos de una clase


86

Tengo una clase .objectque tiene un atributo llamado level. Quiero obtener una lista de todos los valores diferentes de levelen la página para poder seleccionar el más alto.

Si hago algo como:

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

... ¿eso me dará una lista de valores que son los valores del atributo de nivel? Sospecho que no, pero entonces, ¿cómo haces algo así?

Nota: No quiero seleccionar un objeto HTML para su manipulación, ya que es más común, sino que quiero seleccionar valores del atributo.

EDITAR: Para obtener el "nivel" más alto, he hecho esto, pero no parece funcionar. Probaré el otro método sugerido ahora.

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

alert(highLevel);

5
@Ankur, debe seleccionar uno de estos como respuesta a esta pregunta
Nathan Koop

Respuestas:


195

$(".object").attr("level")simplemente devolverá el atributo del primer .objectelemento.

Esto le dará una matriz de todos los levels:

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

6
¿Qué hace el .get()?
Yuji 'Tomita' Tomita

21
@Yuji: getconvierte el objeto jQuery en una matriz regular.
Kobi

@MandeepJain: ¿Cómo se marca una respuesta como 'correcta'? Puede que este no haya sido marcado como 'aceptado', pero más de 100 personas lo han votado como 'útil', ¡y eso es lo suficientemente bueno para mí!
Michael Scheper

1
Gran respuesta. Un poco más intuitivo / más limpio para mí es .get()la matriz primero, luego use la .map()función de flecha más (soporte del navegador: caniuse.com/#search=arrow ) para construir la matriz con un poco de javascript simple:$(".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>

Estoy asumiendo un marcado como este:

<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 mi código, recibo una alerta "1000".

Aquí hay otra solución, que combina varias de las otras respuestas de harpo, lomaxx y 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

el selector

$(".object[level]")

le dará todos los elementos dom con clase objecty un atributo level.

Luego puede usar el método .each () para iterar sobre los elementos para obtener el valor más alto


$(".object[level=something]") donde algo es el valor de atributo que estás buscando
James

0

Puede ampliar la funcionalidad de Jquery y agregar su propia implementación 'attrs'.

Agregue las siguientes líneas de código a su archivo JavaScript:

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

Ahora puede obtener la lista de valores de nivel llamando a:

$(".object").attrs("level")
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.