jQuery làm thế nào để tìm một phần tử dựa trên giá trị thuộc tính dữ liệu?

Tôi đã có kịch bản sau đây:

var el = 'li';

và có 5 <li>'trên mỗi trang có một data-slide=numberthuộc tính (số tương ứng là 1,2,3,4,5) .

Bây giờ tôi cần tìm số slide hiện đang được ánh xạ var current = $('ul').data(current);và được cập nhật trên mỗi thay đổi slide.

Cho đến nay, những nỗ lực của tôi đã không thành công, cố gắng xây dựng bộ chọn phù hợp với slide hiện tại:

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

không khớp / trả lại bất cứ thứ gì

Lý do tôi không thể mã hóa liphần đó là vì đây là biến người dùng có thể truy cập có thể được thay đổi thành một yếu tố khác nếu được yêu cầu, vì vậy nó có thể không phải luôn luôn là một li.

Bất cứ ý tưởng về những gì tôi đang thiếu?

Bạn phải đưa giá trị của currentvào bộ chọn Thuộc tính bằng :

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

Đối với môi trường JavaScript cũ hơn ( ES5 trở về trước):

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

trong trường hợp bạn không muốn nhập tất cả, đây là một cách ngắn hơn để truy vấn theo thuộc tính dữ liệu:

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

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

Khi tìm kiếm với [data-x = ...], xem ra, nó không hoạt động với 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

Bạn có thể sử dụng điều này thay thế:

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

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

Tôi đã cải thiện khả năng mở rộng bộ lọcByData của psycho brm sang jQuery.

Trong đó tiện ích mở rộng trước đây đã tìm kiếm trên cặp khóa-giá trị, với tiện ích mở rộng này, bạn có thể tìm kiếm thêm sự hiện diện của thuộc tính dữ liệu, bất kể giá trị của nó.

(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);

Sử dụng:

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

Hoặc câu đố: http://jsfiddle.net/PTqmE/46/

Không có JQuery, ES6

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

Tôi biết câu hỏi là về JQuery, nhưng người đọc có thể muốn một phương thức JS thuần túy.

Tôi đã gặp vấn đề tương tự trong khi tìm nạp các phần tử bằng cách sử dụng thuộc tính jQuery và data- *.

vì vậy để bạn tham khảo mã ngắn nhất ở đây:

Đây là Mã HTML của tôi:

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

Đây là bộ chọn jQuery của tôi:

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

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

Tôi hy vọng điều này có thể làm việc tốt hơn

cảm ơn

Bộ chọn $("ul [data-slide='" + current +"']");này sẽ hoạt động cho cấu trúc sau:

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

Trong khi điều này $("ul[data-slide='" + current +"']");sẽ làm việc cho:

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

Quay trở lại câu hỏi ban đầu của anh ấy, về cách làm cho công việc này hoạt động mà không biết trước loại phần tử, sau đây thực hiện điều này:

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