1

Tengo un código donde tengo varios div con un "data-id" de distintos productos y necesito extraer el dato del numero, que está en el atributo data id, es decir el 1482. Ejemplo de unos de los div:

<div class="box-producto" data-id="1482">

Estoy intentado hacerlo con Jquery de la siguiente manera

 $(this).data("data-id") // retorna undefined

o también si trato con windows load , sin embargo me retorna init [window] y ningun dato manipulable.

$(window).load(function(){
 $(this).data("data-id")
})// retorna init [window] 
1
  • Hola, para extraer el valor, solo le pones el nombre no el data, asi: $(this).data("id") Commented el 15 oct. 2020 a las 20:35

2 respuestas 2

2

En JavaScript, se nos recomienda usar:

  • La propiedad dataset, la cual nos permite acceder a los valores de atributos personalizados que inician con data-
  • Una vez que accedes puedes imprimir el valor deseado, en este caso sería el id el cual es el valor que se encuentra posterior al guión

Con una sintaxis como esta:

    <div class="box-producto" data-id="1482">
      
    <script>
      let elemento = document.querySelector('.box-producto');
      
      console.log(elemento.dataset.id);  
    </script>

3
  • Gracias, si quisiera por ejemplo obtener de todos los div que tengan "box producto" bastaría con querySelectorAll?
    – Ele Wayne
    Commented el 15 oct. 2020 a las 21:16
  • @EleWayne es decir todos los que tengan una determinada clase?, de ser así estás en lo correcto pero deberás iterar el node list que querySelectorAll te retorna
    – user128299
    Commented el 15 oct. 2020 a las 21:17
  • @Ele Wayne para que utilizar querySelectorAll si estás utilizando JQuery ?? Basta con acceder a tus elementos de la siguiente manera: $('.box-producto') esto accedera a todos los elementos que tengan la clase box-producto como dice BetaM con querySelectorAll tendrás que iterar lo que te te devuelva, pero si ya estás usando JQuery pues sácale provecho. Commented el 17 oct. 2020 a las 14:42
0

Puedes lograrlo solo con id dentro de la función data así:

$(".box-producto").on("click", function() {
  console.log($(this).data("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-producto" data-id="1482">Prueba</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.