¿Cómo encontrar el elemento HTML con un atributo de datos que contiene un valor específico?

Estoy usando atributos de datos en HTML y ahora quiero obtenerlos.

Tengo un atributo como este:

Supongamos que tengo un valor “3”. Quiero buscar el atributo de datos que contiene “3”;

¿Cómo puedo hacer esto?

Puede lograrlo fácilmente con el atributo jQuery que contiene un selector que:

Selecciona los elementos que tienen el atributo especificado con un valor que contiene una subcadena dada.

https://api.jquery.com/attribute-contains-selector/

Este es el más generoso de los selectores de atributo jQuery que coinciden con un valor. Seleccionará un elemento si la cadena del selector aparece en algún lugar dentro del valor del atributo del elemento.

ejemplo:

  $( "div.row[data-party-registration-source-type-id*='3']" ) 

Trate de usar el dataset de dataset en javascript para buscar los datos que sean relevantes para su data-attribute , divídalo y revíselo,

 var isExist = document .querySelector("div.row.hidden") .dataset.partyRegistrationSourceTypeId.split(",").indexOf("3") > -1 

Pruebe con el selector de contenidos:

 $('[data-party-registration-source-type-id~="3"]') 

EDITAR: Esto no funcionará para el conjunto de datos de OP. Devolverá elementos que contienen 33 si busca 3 por ejemplo.


Puede usar el comodín CSS Selector.

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

Es nativo, por lo que puedes usar ti con o sin jquery.

 $('[data-party-registration-source-type-id*="3"]'); document.querySelectorAll('[data-party-registration-source-type-id*="3"]'); 

ver violín: https://jsfiddle.net/qw1x0eo7/

Para la div entrada de prueba única en la página, primero, obtenga la cadena del atributo de datos y rompa en la matriz con la ayuda de la función de división.

 attrName = 'data-party-registration-source-type-id'; dataArray = $('['+attrName+']').attr(attrName).split(","); 

Luego, recorte el valor de la matriz para eliminar cualquier espacio en blanco y praseInt para convertir el carácter en int.

  trimmedDataArray = $.map(dataArray, function(value) { return parseInt(value.trim()); }); testVal = 3; isExist = $.inArray( testVal, trimmedDataArray ); 

Si, “isExist” = -1 (no encontrado) Else, (found)

Para Multiple Test Input Div en la página,

Usa el código de arriba con cada función

 attrName = 'data-party-registration-source-type-id'; testValArray = [3,4,5,6]; $('['+attrName+']').each(function(index){ dataArray = ''; dataArray = $(this).attr(attrName).split(","); trimmedDataArray = $.map(dataArray, function(value) { return parseInt(value.trim()); // for words use, return value.trim(); }); testVal = testValArray[index]; isExist = $.inArray( testVal, trimmedDataArray ); //your code });