Come ottenere l'attributo id-dati?


813

Sto usando il plugin jQuery quicksand. Devo ottenere l'ID dati dell'elemento cliccato e passarlo a un servizio web. Come ottengo l'attributo id-dati? Sto usando il .on()metodo per ricollegare l'evento click per gli elementi ordinati.

$("#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
Avviso ai nuovi visitatori: il metodo .live () di JQuery è stato deprecato a favore di .on ()
dendini,

3
Dovresti rimuovere il # dall'avviso, non ne hai bisogno :-)
Diventa Carter

attr ("# data-id")) è sbagliato. corretto: attr ("data-id"));
guido _nhcol.com.br_

@BruceAdams potrebbe valere la pena modificare la domanda per utilizzare il on()metodo come live()è ora deprecato, e questa domanda ottiene parecchi visitatori.
Rory McCrossan,

Risposte:


1637

Per ottenere il contenuto dell'attributo data-id(come in <a data-id="123">link</a>) devi usare

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

oppure .data()(se si utilizza jQuery più recente> = 1.4.3)

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

e la parte successiva data-deve essere minuscola, ad es. data-idNumnon funzionerà, ma data-idnumfunzionerà.


7
Ho dovuto usare attr()perché jQuery stava eliminando gli zeri iniziali dai codici postali usando data(), TFM dice "A partire da jQuery 1.4.3 HTML 5, gli attributi dei dati verranno automaticamente inseriti nell'oggetto dati di jQuery ... Ogni tentativo viene fatto per convertire la stringa in un valore JavaScript (inclusi valori booleani, numeri, oggetti, matrici e null). Un valore viene convertito in un numero solo se ciò non modifica la rappresentazione del valore. Ad esempio, "1E02" e "100.000" sono equivalenti come numeri (valore numerico 100) ma convertirli altererebbe la loro rappresentazione in modo che vengano lasciati come stringhe. "
Wesley Murch

43
Questo sta tornando "indefinito" per me.
sempre il

4
Sebbene ovvio per alcuni, penso che valga la pena notare per coloro che hanno avuto problemi con questo che quando si utilizza .attr () il testo tra parentesi deve corrispondere a tutto ciò che è stato impostato come attributo di dati personalizzato. cioè se l'attributo di dati personalizzati è volume di dati , è necessario fare riferimento ad esso utilizzando .attr ("volume di dati") . E, con jQuery 1.4.3 verso l'alto e utilizzando .data (), il testo tra parentesi deve corrispondere all'attributo di dati personalizzato senza il prefisso dati . ovvero se l'attributo di dati personalizzati è volume di dati , è necessario fare riferimento ad esso utilizzando .data ("volume") .
Luca,

111
Per coloro che segnalano che non funziona, assicurati che l'attributo contenga solo lettere minuscole. Ad esempio "data-listId" dovrebbe essere "data-listid". Vedi stackoverflow.com/questions/10992984/… per il motivo.
WindChimes,

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

170

Se vogliamo recuperare o aggiornare questi attributi utilizzando JavaScript nativo esistente, possiamo farlo utilizzando i metodi getAttribute e setAttribute come mostrato di seguito:

Tramite 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>

Attraverso 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');

Leggi questa documentazione


90

Nota importante. Tenere presente che se si modifica dinamicamente l' data- attributo tramite JavaScript NON si rifletterà nella data()funzione jQuery. Devi regolarlo anche tramite la data()funzione.

<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

Buon punto ... c'è un dato (). Aggiorna per aggiornare i dati dagli attributi?
Harag,

1
È un punto importante per modificare e accedere dinamicamente al valore dell'attributo dei dati.
Motahar Hossain,


19

Sorpreso nessuno ha menzionato:

<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"));
});

Ecco l'esempio funzionante: https://jsfiddle.net/ed5axgvk/1/


2
Risposta molto bella. Molte grazie.
Ruberandinda Patience,

13

HTML

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

JS

$(this).data().value;

o

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

ANS: 50

Per me va bene!




11

Accedere all'attributo dei dati con i propri idè un po 'facile per me.

$("#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

Questo pezzo di codice restituirà il valore degli attributi dei dati, ad esempio: data-id, data-time, data-name ecc., Che ho mostrato per l'id

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

js:

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

// ottiene il valore dell'id-data -> a1

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

// questo cambierà l'id-dati -> a2

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

// ottiene il valore dell'id-data -> a2


4

usando jQuery:

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


0

Ho una campata. Voglio prendere il valore dell'attributo data-txt-lang, che viene usato definito.

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

0

Il problema è che non si specifica l'opzione o l'opzione selezionata del menu a discesa o dell'elenco. Ecco un esempio per il menu a discesa, presumo un record di dati di attributo di dati.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.