Pregunta Seleccionar elemento por atributo de datos


¿Existe un método sencillo y directo para seleccionar elementos en función de su data ¿atributo? Por ejemplo, seleccione todos los anclajes que tengan el atributo de datos llamado customerID que tiene valor de 22.

Estoy un poco indeciso de usar rel u otros atributos para almacenar dicha información, pero me resulta mucho más difícil seleccionar un elemento en función de qué datos se almacenan en él.


832
2018-03-21 16:13


origen


Respuestas:


$('*[data-customerID="22"]');

Deberías poder omitir el *, pero si recuerdo correctamente, dependiendo de la versión de jQuery que esté utilizando, esto podría arrojar resultados erróneos.

Tenga en cuenta que para la compatibilidad con la API de Selectores (document.querySelector{,all}), las comillas alrededor del valor del atributo (22) no puede ser omitido en este caso.

Además, si trabaja mucho con los atributos de datos en sus scripts de jQuery, es posible que desee considerar el uso de Complemento de atributos de datos personalizados HTML5. Esto le permite escribir un código aún más legible usando .dataAttr('foo'), y da como resultado un tamaño de archivo más pequeño después de la minificación (en comparación con el uso .attr('data-foo'))


1227
2018-03-21 16:14



Para las personas que buscan en Google y desean reglas más generales sobre cómo seleccionar con atributos de datos:

$("[data-test]") seleccionará cualquier elemento que simplemente tiene el atributo de datos (sin importar el valor del atributo). Incluso:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]') seleccionará cualquier elemento donde el atributo de datos contiene  foo pero no tiene que ser exacto, como por ejemplo:

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]') seleccionará cualquier elemento donde el valor exacto del atributo de datos sea the_exact_value, por ejemplo:

<div data-test="the_exact_value">Exact Matches</div>

pero no

<div data-test="the_exact_value foo">This won't match</div>

234
2018-03-07 20:03



Utilizando $('[data-whatever="myvalue"]') seleccionará cualquier cosa con atributos html, pero en jQueries más recientes parece que si usa $(...).data(...) para adjuntar datos, utiliza algo del navegador mágico y no afecta al html, por lo tanto no es descubierto por .find como se indica en el respuesta anterior.

Verificar (probado con 1.7.2+) (ver también violín) (actualizado para ser más completo)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

119
2017-07-26 15:57



Para seleccionar todos los anclajes con el atributo de datos data-customerID==22, deberías incluir el a para limitar el alcance de la búsqueda a solo ese tipo de elemento. Hacer búsquedas de atributos de datos en un bucle grande o en alta frecuencia cuando hay muchos elementos en la página puede causar problemas de rendimiento.

$('a[data-customerID="22"]');

57
2017-09-23 16:53



No he visto una respuesta de JavaScript sin jQuery. Espero que ayude a alguien.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>

Información:


41
2017-12-29 14:44



a través del método Jquery filter ():

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

11
2017-07-08 23:26



La construcción de esta manera: $('[data-XXX=111]') no está trabajando en Safari 8.0.

Si configura el atributo de datos de esta manera: $('div').data('XXX', 111), solo funciona si configura el atributo de datos directamente en DOM como este: $('div').attr('data-XXX', 111).

Creo que es porque el equipo jQuery optimizó el recolector de basura para evitar fugas de memoria y operaciones pesadas en la reconstrucción de DOM en cada atributo de datos de cambio.


9
2017-10-27 09:13



Para que esto funcione en Chrome, el valor debe no tener otro par de citas

Solo funciona, por ejemplo, así:

$('a[data-customerID=22]');

8
2017-12-28 15:48



Ejemplos nativos de JS

Obtener NodeList de elementos

var elem = document.querySelectorAll('[data-id="container"]')

html: <div data-id="container"></div>

Obtener el primer elemento 

var firstElem = document.querySelectorAll('[id="container"]')[0]

html: <div id="container"></div>

Apunte a una colección de nodos que devuelve una lista de nodos

document.getElementById('footer').querySelectorAll('[data-id]')

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

Obtener elementos basados ​​en múltiples valores de datos (OR)

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html:

<div data-selection="20"></div>
<div data-section="12"></div>

Obtener elementos basados ​​en valores de datos combinados (Y)

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html:

<div data-prop1="12" data-prop2="20"></div>

Obtenga artículos donde el valor comienza con

document.querySelectorAll('[href^="https://"]')

8
2017-11-15 07:53



A veces es conveniente filtrar los elementos en función de si tienen elementos de datos adjuntos a ellos programáticamente (también conocido como no a través de los atributos del dom):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

Lo anterior funciona pero no es muy legible. Un mejor enfoque es usar un pseudo selector para probar este tipo de cosas:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

Ahora podemos refactorizar la declaración original a algo más fluido y legible:

$el.filter(":hasData('foo-bar')").doSomething();

3
2017-12-09 13:01