jQuery bagaimana menemukan elemen berdasarkan nilai atribut data?

Saya punya skenario berikut:

var el = 'li';

dan ada 5 <li>'s pada halaman masing-masing dengan data-slide=numberatribut (nomor masing-masing 1,2,3,4,5) .

Saya sekarang perlu menemukan nomor slide yang sedang aktif yang dipetakan ke var current = $('ul').data(current);dan diperbarui pada setiap perubahan slide.

Sejauh ini percobaan saya tidak berhasil, mencoba membuat pemilih yang cocok dengan slide saat ini:

$('ul').find(el+[data-slide=+current+]);

tidak cocok / mengembalikan apa pun ...

Alasan saya tidak bisa meng-hardcode libagian tersebut adalah karena ini adalah variabel yang dapat diakses pengguna yang dapat diubah ke elemen lain jika diperlukan, jadi itu mungkin tidak selalu menjadi li.

Ada ide tentang apa yang saya lewatkan?

Anda harus menyuntikkan nilai currentke dalam pemilih Atribut Setara :

$("ul").find(`[data-slide='${current}']`)

Untuk lingkungan JavaScript yang lebih lama ( ES5 dan sebelumnya):

$("ul").find("[data-slide='" + current + "']"); 

jika Anda tidak ingin mengetik semua itu, inilah cara yang lebih pendek untuk melakukan kueri berdasarkan atribut data:

$("ul[data-slide='" + current +"']");

FYI: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

Saat mencari dengan [data-x = ...], hati-hati, itu tidak berfungsi dengan setter jQuery.data (..) :

$('<b data-x="1">'  ).is('[data-x=1]') // this works
> true

$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

Anda bisa menggunakan ini sebagai gantinya:

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}

$('<b>').data('x', 1).filterByData('x', 1).length
> 1

Saya meningkatkan ekstensi filterByData psiko brm ke jQuery.

Di mana mantan ekstensi mencari pasangan nilai kunci, dengan ekstensi ini Anda juga dapat mencari keberadaan atribut data, terlepas dari nilainya.

(function ($) {

    $.fn.filterByData = function (prop, val) {
        var $self = this;
        if (typeof val === 'undefined') {
            return $self.filter(
                function () { return typeof $(this).data(prop) !== 'undefined'; }
            );
        }
        return $self.filter(
            function () { return $(this).data(prop) == val; }
        );
    };

})(window.jQuery);

Pemakaian:

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').data('x', 1).filterByData('x').length       // output: 1

// test data
function extractData() {
  log('data-prop=val ...... ' + $('div').filterByData('prop', 'val').length);
  log('data-prop .......... ' + $('div').filterByData('prop').length);
  log('data-random ........ ' + $('div').filterByData('random').length);
  log('data-test .......... ' + $('div').filterByData('test').length);
  log('data-test=anyval ... ' + $('div').filterByData('test', 'anyval').length);
}

$(document).ready(function() {
  $('#b5').data('test', 'anyval');
});

// the actual extension
(function($) {

  $.fn.filterByData = function(prop, val) {
    var $self = this;
    if (typeof val === 'undefined') {
      return $self.filter(

        function() {
          return typeof $(this).data(prop) !== 'undefined';
        });
    }
    return $self.filter(

      function() {
        return $(this).data(prop) == val;
      });
  };

})(window.jQuery);


//just to quickly log
function log(txt) {
  if (window.console && console.log) {
    console.log(txt);
    //} else {
    //  alert('You need a console to check the results');
  }
  $("#result").append(txt + "<br />");
}

#bPratik {
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="bPratik">
  <h2>Setup</h2>
  <div id="b1" data-prop="val">Data added inline :: data-prop="val"</div>
  <div id="b2" data-prop="val">Data added inline :: data-prop="val"</div>
  <div id="b3" data-prop="diffval">Data added inline :: data-prop="diffval"</div>
  <div id="b4" data-test="val">Data added inline :: data-test="val"</div>
  <div id="b5">Data will be added via jQuery</div>
  <h2>Output</h2>
  <div id="result"></div>

  <hr />
  <button onclick="extractData()">Reveal</button>
</div>

Atau biola: http://jsfiddle.net/PTqmE/46/

Tanpa JQuery, ES6

document.querySelectorAll(`[data-slide='${current}']`);

Saya tahu pertanyaannya adalah tentang JQuery, tetapi pembaca mungkin menginginkan metode JS murni.

Saya telah menghadapi masalah yang sama saat mengambil elemen menggunakan atribut jQuery dan data- *.

jadi untuk referensi Anda, kode terpendek ada di sini:

Ini adalah Kode HTML saya:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

Ini adalah pemilih jQuery saya:

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.

$("ul").find("li[data-slide='" + current + "']");

Saya harap ini bisa bekerja lebih baik

Terima kasih

Pemilih ini $("ul [data-slide='" + current +"']");akan bekerja untuk struktur berikut:

<ul><li data-slide="item"></li></ul>  

Sementara ini $("ul[data-slide='" + current +"']");akan bekerja untuk:

<ul data-slide="item"><li></li></ul>

Kembali ke pertanyaan aslinya, tentang cara membuat ini bekerja tanpa mengetahui jenis elemen di muka, berikut hal ini:

$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");