Pertanyaan jQuery bagaimana menemukan elemen berdasarkan nilai data-atribut?


Saya punya skenario berikut:

var el = 'li';

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

Sekarang saya perlu mencari nomor slide yang sedang aktif yang dipetakan var current = $('ul').data(current); dan diperbarui pada setiap perubahan slide.

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

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

tidak cocok / mengembalikan apa pun ...

Alasan saya tidak bisa melakukan hardcode li bagian adalah bahwa ini adalah variabel yang dapat diakses pengguna yang dapat diubah ke elemen yang berbeda jika diperlukan, sehingga tidak selalu menjadi li.

Ada gagasan tentang apa yang saya lewatkan?


824
2017-11-16 05:11


asal


Jawaban:


Anda harus menyuntikkan nilai current menjadi Atribut Sama pemilih:

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

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

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

1225
2017-11-16 06:30



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

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

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


383
2018-03-03 23:08



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

$('<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 dapat 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

204
2018-03-27 03:59



Saya diperbaiki ekstensi filterByData psiko brm ke jQuery.

Di mana mantan ekstensi mencari pasangan kunci-nilai, 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/


35
2018-03-05 21:21



Saya 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.

22
2017-10-22 12:39



Kembali ke pertanyaan aslinya, tentang cara membuat karya ini tanpa mengetahui jenis elemen sebelumnya, hal berikut ini:

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

11
2017-11-09 23:32



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

Saya harap ini bisa bekerja lebih baik

Terima kasih


11
2017-07-12 06:26



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

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

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

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


10
2017-09-30 15:08



Tanpa JQuery, ES6

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

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


5
2018-06-04 20:50