Bagaimana cara mendapatkan atribut data-id?


813

Saya menggunakan plugin quicksand jQuery. Saya perlu mendapatkan data-id dari item yang diklik dan meneruskannya ke layanan web. Bagaimana cara mendapatkan atribut data-id? Saya menggunakan .on()metode untuk mengikat kembali acara klik untuk item yang diurutkan.

$("#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
Pemberitahuan kepada pengunjung baru: .Live () metode JQuery telah ditinggalkan demi .on ()
dendini

3
Anda harus menghapus # dari peringatan, Anda tidak memerlukannya :-)
Becs Carter

attr ("# data-id")) salah. dikoreksi: attr ("data-id"));
guido _nhcol.com.br_

@BruceAdams mungkin ada baiknya mengedit pertanyaan untuk menggunakan on()metode seperti live()sekarang sudah usang, dan pertanyaan ini mendapat beberapa pengunjung.
Rory McCrossan

Jawaban:


1637

Untuk mendapatkan konten dari atribut data-id(seperti dalam <a data-id="123">link</a>) yang harus Anda gunakan

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

atau .data()(jika Anda menggunakan jQuery yang lebih baru> = 1.4.3)

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

dan bagian sesudahnya data-harus huruf kecil, mis. data-idNumtidak akan berfungsi, tetapi data-idnumakan.


7
Saya harus menggunakan attr()karena jQuery melepaskan nol dari kode pos menggunakan data(), TFM mengatakan "Pada jQuery 1.4.3 HTML-atribut data akan secara otomatis ditarik ke objek data jQuery. ... Setiap upaya dilakukan untuk mengubah string ke nilai JavaScript (ini termasuk boolean, angka, objek, array, dan null). Nilai hanya dikonversi ke angka jika hal itu tidak mengubah representasi nilai. Misalnya, "1E02" dan "100.000" adalah setara sebagai angka (nilai numerik 100) tetapi mengonversinya akan mengubah representasi mereka sehingga mereka dibiarkan sebagai string. "
Wesley Murch

43
Ini mengembalikan 'tidak terdefinisi' untuk saya.
Foreever

4
Meskipun jelas bagi sebagian orang, saya pikir perlu dicatat bagi mereka yang memiliki masalah dengan ini bahwa ketika menggunakan .attr () teks di dalam tanda kurung harus cocok dengan apa pun yang Anda tetapkan sebagai atribut data khusus Anda. yaitu, jika atribut data khusus adalah data-volume , Anda harus merujuknya menggunakan .attr ("data-volume") . Dan, dengan jQuery 1.4.3 ke atas dan menggunakan DATA (), teks di dalam kurung harus sesuai data atribut kustom Anda tanpa itu data- awalan. yaitu jika atribut data khusus adalah data-volume , Anda harus referensi menggunakan data .data ("volume") .
Luke

111
Bagi yang melaporkannya tidak berfungsi, pastikan atribut Anda hanya berisi huruf kecil. Misalnya "data-listId" harus "data-listid". Lihat stackoverflow.com/questions/10992984/... untuk alasan mengapa.
WindChimes

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

170

Jika kita ingin mengambil atau memperbarui atribut ini menggunakan JavaScript asli yang ada , maka kita dapat melakukannya menggunakan metode getAttribute dan setAttribute seperti yang ditunjukkan di bawah ini:

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

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

Baca dokumentasi ini


90

Catatan penting. Perlu diingat, bahwa jika Anda menyesuaikan data- atribut secara dinamis melalui JavaScript, itu TIDAK akan tercermin dalam data()fungsi jQuery. Anda harus menyesuaikannya melalui data()fungsi juga.

<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

Poin bagus ... apakah ada data (). Refresh untuk menyegarkan data dari atribut?
Harag

1
Ini adalah poin penting untuk mengubah dan mengakses nilai atribut data secara dinamis.
Motahar Hossain

56

Jika Anda tidak khawatir tentang browser IE lama, Anda juga dapat menggunakan API dataset HTML5

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

JS

var myDiv = document.querySelector('#my-div');

myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"

Demo: http://html5demos.com/dataset

Daftar dukungan browser lengkap: http://caniuse.com/#feat=dataset


19

Terkejut tidak ada yang menyebutkan:

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

Berikut ini contoh kerjanya: https://jsfiddle.net/ed5axgvk/1/


2
Jawaban yang sangat bagus. Terima kasih banyak.
Ruberandinda Patience

13

HTML

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

JS

$(this).data().value;

atau

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

ANS: 50

Bekerja untukku!




11

Mengakses atribut data dengan caranya sendiri idagak mudah bagi saya.

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

Sepotong kode ini akan mengembalikan nilai atribut data misalnya: data-id, data-waktu, data-nama dll., Saya telah menunjukkan untuk id

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

js:

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

// dapatkan nilai data-id -> a1

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

// ini akan mengubah data-id -> a2

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

// dapatkan nilai data-id -> a2


4

menggunakan jQuery:

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


0

Saya memiliki rentang. Saya ingin mengambil nilai atribut data-txt-lang, yang digunakan didefinisikan.

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

0

Masalahnya adalah Anda tidak menentukan opsi atau opsi dropdown atau daftar yang dipilih, Berikut adalah contoh untuk dropdown, saya mengasumsikan data atribut data-record.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.