¿Cómo obtener el atributo de identificación de datos?


813

Estoy usando el complemento jQuery quicksand. Necesito obtener la identificación de datos del elemento seleccionado y pasarla a un servicio web. ¿Cómo obtengo el atributo de identificación de datos? Estoy usando el .on()método para volver a vincular el evento de clic para los elementos ordenados.

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>


57
Aviso a los nuevos visitantes: el método .live () de JQuery ha quedado en desuso a favor de .on ()
dendini el

3
Debe eliminar el # de la alerta, no lo necesita :-)
Becs Carter

attr ("# data-id")) está mal. corregido: attr ("data-id"));
guido _nhcol.com.br_

@BruceAdams puede valer la pena editar la pregunta para usar el on()método, ya live()que ahora está en desuso, y esta pregunta recibe bastantes visitantes.
Rory McCrossan

Respuestas:


1637

Para obtener el contenido del atributo data-id(como en <a data-id="123">link</a>) debes usar

$(this).attr("data-id") // will return the string "123"

o .data()(si usa jQuery más nuevo> = 1.4.3)

$(this).data("id") // will return the number 123

y la parte posterior data-debe estar en minúscula, por ejemplo data-idNum, no funcionará, pero lo data-idnumhará.


77
Tuve que usar attr()porque jQuery estaba quitando los ceros iniciales de los códigos postales usando data(), TFM dice: "A partir de jQuery 1.4.3, los atributos de datos HTML 5 se incorporarán automáticamente al objeto de datos de jQuery ... Se hace todo lo posible para convertir la cadena a un valor de JavaScript (esto incluye booleanos, números, objetos, matrices y valores nulos). Un valor solo se convierte en un número si al hacerlo no cambia la representación del valor. Por ejemplo, "1E02" y "100.000" son equivalentes como números (valor numérico 100) pero convertirlos alteraría su representación para que se dejen como cadenas. "
Wesley Murch,

43
Esto está volviendo 'indefinido' para mí.
Foreever

44
Si bien es obvio para algunos, creo que vale la pena señalar para aquellos que tuvieron problemas con esto que al usar .attr () el texto dentro de los corchetes debe coincidir con lo que haya establecido como su atributo de datos personalizado. es decir, si el atributo de datos personalizado es volumen de datos , debe hacer referencia a él usando .attr ("volumen de datos") . Y, con jQuery 1.4.3 hacia arriba y usando .data (), el texto dentro de los corchetes debe coincidir con su atributo de datos personalizado sin el prefijo de datos . es decir, si el atributo de datos personalizado es volumen de datos , debe hacer referencia a él utilizando .data ("volumen") .
Lucas

111
Para aquellos que informan que no funciona, asegúrese de que su atributo contenga solo letras minúsculas. Por ejemplo, "data-listId" debería ser "data-listid". Consulte stackoverflow.com/questions/10992984/… para conocer el motivo.
WindChimes

2
o$(this).data().id //returns 123
Dem Pilafian

170

Si queremos recuperar o actualizar estos atributos usando JavaScript nativo existente, entonces podemos hacerlo usando los métodos getAttribute y setAttribute como se muestra a continuación:

A través de JavaScript

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

A través de jQuery

// Fetching data
var fruitCount = $(this).data('fruit');
OR 
// If you updated the value, you will need to use below code to fetch new value 
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).attr('data-fruit','7');

Lee esta documentación


90

Nota IMPORTANTE. Tenga en cuenta que si ajusta el data- atributo dinámicamente a través de JavaScript, NO se reflejará en la data()función jQuery. Tienes que ajustarlo a través de la data()función también.

<a data-id="123">link</a>

js:

$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

Buen punto ... ¿hay una actualización de datos () para actualizar los datos de los atributos?
Harag

1
Es un punto importante para cambiar y acceder al valor del atributo de datos dinámicamente.
Motahar Hossain


19

Sorprendido, nadie mencionó:

<select id="selectVehicle">
     <option value="1" data-year="2011">Mazda</option>
     <option value="2" data-year="2015">Honda</option>
     <option value="3" data-year="2008">Mercedes</option>
     <option value="4" data-year="2005">Toyota</option>
    </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Aquí está el ejemplo de trabajo: https://jsfiddle.net/ed5axgvk/1/


2
Muy buena respuesta. Muchas gracias.
Ruberandinda Paciencia

13

HTML

<span id="spanTest" data-value="50">test</span>

JS

$(this).data().value;

o

$("span#spanTest").data().value;

RESPUESTA: 50

¡Funciona para mi!




11

idPara mí, acceder al atributo de datos es un poco fácil.

$("#Id").data("attribute");

function myFunction(){
  alert($("#button1").data("sample-id"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>


7

Esta pieza de código devolverá el valor de los atributos de datos, por ejemplo: ID de datos, tiempo de datos, nombre de datos, etc., he mostrado para la identificación

<a href="#" id="click-demo" data-id="a1">Click</a>

js:

$(this).data("id");

// obtener el valor de la identificación de datos -> a1

$(this).data("id", "a2");

// esto cambiará el ID de datos -> a2

$(this).data("id");

// obtener el valor de la identificación de datos -> a2


4

usando jQuery:

  $( ".myClass" ).load(function() {
    var myId = $(this).data("id");
    $('.myClass').attr('id', myId);
  });


0

Tengo un lapso Quiero tomar el valor del atributo data-txt-lang, que se usa definido.

$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});

0

El problema es que no está especificando la opción o la opción seleccionada del menú desplegable o la lista. Aquí hay un ejemplo para el menú desplegable, estoy asumiendo un registro de datos de atributos de datos.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });
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.