jQuery डेटा-विशेषता मान के आधार पर तत्व कैसे ढूंढें?




jquery-selectors custom-data-attribute (6)

JQuery और डेटा- * विशेषता का उपयोग करते हुए तत्वों को लाने के दौरान मुझे एक ही समस्या का सामना करना पड़ा है।

इसलिए आपके संदर्भ के लिए सबसे छोटा कोड यहां है:

यह मेरा एचटीएमएल कोड है:

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

यह मेरा jQuery चयनकर्ता है:

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

मुझे निम्नलिखित परिदृश्य मिला है:

var el = 'li';

और प्रत्येक पृष्ठ पर 5 <li> जो प्रत्येक data-slide=number विशेषता (क्रमशः 1,2,3,4,5 है)

अब मुझे वर्तमान में सक्रिय स्लाइड नंबर खोजने की आवश्यकता है जो var current = $('ul').data(current); में मैप किया गया है var current = $('ul').data(current); और प्रत्येक स्लाइड परिवर्तन पर अद्यतन किया जाता है।

अभी तक मेरी कोशिशें असफल रही हैं, चयनकर्ता को बनाने की कोशिश कर रही है जो वर्तमान स्लाइड से मेल खाती है:

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

कुछ भी मेल नहीं खाता / वापस नहीं आता ...

कारण मैं li भाग को हार्डकोड नहीं कर सकता हूं कि यह एक उपयोगकर्ता सुलभ चर है जिसे आवश्यक होने पर एक अलग तत्व में बदला जा सकता है, इसलिए यह हमेशा एक li नहीं हो सकता है।

मुझे क्या याद आ रहा है पर कोई विचार?


[डेटा-एक्स = ...] के साथ खोज करते समय, देखें, यह 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

आप इसके बजाय इसका उपयोग कर सकते हैं:

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

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

आपको एक विशेषता बराबर चयनकर्ता में current के मूल्य को इंजेक्ट करना होगा:

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

पुराने जावास्क्रिप्ट वातावरण (ES5 और इससे पहले) के लिए:

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

मैंने jQuery पर share पर सुधार किया।

जहां पूर्व एक्सटेंशन एक कुंजी-मूल्य जोड़ी पर खोजा गया था, इस एक्सटेंशन के साथ आप इसके मूल्य के बावजूद डेटा विशेषता की उपस्थिति को अतिरिक्त रूप से खोज सकते हैं।

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

उपयोग:

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

या पहेली: http://jsfiddle.net/PTqmE/46/


यह चयनकर्ता $("ul [data-slide='" + current +"']"); निम्नलिखित संरचना के लिए काम करेंगे:

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

जबकि यह $("ul[data-slide='" + current +"']"); के लिए काम करेंगे:

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


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

मुझे उम्मीद है कि यह बेहतर काम कर सकता है

धन्यवाद







custom-data-attribute