jQuery nasıl bir veri özniteliği değerine dayalı bir öğe bulmak için?

Aşağıdaki senaryo var:

var el = 'li';

ve <li>sayfada her biri bir data-slide=numberniteliğe sahip 5 sayı vardır (sayı sırasıyla 1,2,3,4,5'tir) .

Şimdi var current = $('ul').data(current);her bir slayt değişikliğiyle eşleştirilen ve güncellenen şu anda etkin olan slayt numarasını bulmam gerekiyor .

Şimdiye kadar denemelerim başarısız oldu, mevcut slayda uyan seçiciyi oluşturmaya çalışıyor:

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

hiçbir şey eşleşmiyor / geri dönmüyor…

Parçayı kodlamamamın nedeni li, bu, gerektiğinde farklı bir öğeye değiştirilebilen kullanıcı tarafından erişilebilir bir değişken olmasıdır, bu nedenle her zaman bir olmayabilir li.

Neyi kaçırdığım hakkında bir fikrin var mı?

Sen değerini enjekte etmek zorunda currentbir içine Özellik Eşittir seçici:

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

Daha eski JavaScript ortamları için ( ES5 ve öncesi):

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

tüm bunları yazmak istemiyorsanız, veri özelliğine göre sorgulamanın daha kısa bir yolu:

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

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

[Data-x = ...] ile arama yaparken dikkat edin, jQuery.data (..) setter ile çalışmaz :

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

Bunun yerine şunları kullanabilirsiniz:

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

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

Ben jQuery için psiko brm's filterByData uzantısı üzerine geliştirdi .

Eski uzantı, bir anahtar / değer çiftinde arama yaptığında, bu uzantıyla, değerinden bağımsız olarak bir veri özelliğinin varlığını da arayabilirsiniz.

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

Kullanımı:

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

Veya keman: http://jsfiddle.net/PTqmE/46/

JQuery, ES6 olmadan

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

Sorunun JQuery ile ilgili olduğunu biliyorum, ancak okuyucular saf bir JS yöntemi isteyebilir.

JQuery ve data- * özniteliğini kullanarak öğeleri getirirken aynı sorunla karşı karşıya.

referans için en kısa kod burada:

Bu benim HTML Kodum:

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

Bu benim jQuery seçicim:

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

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

Umarım bu daha iyi çalışır

Teşekkürler

Bu seçici $("ul [data-slide='" + current +"']");aşağıdaki yapı için çalışacaktır:

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

Bu $("ul[data-slide='" + current +"']");işe yarar olsa da :

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

Öğesinin türünü önceden bilmeden bu çalışmayı nasıl yapacağına dair orijinal sorusuna geri dönersek, aşağıdakileri yapar:

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