jQuery डेटा-विशेषता मान के आधार पर एक तत्व कैसे खोज सकता है?

Question

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

var el = 'li';

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

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

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

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

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

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

मैं क्या याद कर रहा हूँ पर कोई विचार?

Comments

आपको यकीन है कि आपके भीतर .find(el+[data-slide=+current+]);वह कोड है जो आप लिखते हैं? ऐसा लगता है कि आप कुछ उद्धरणों से चूक गए"[data-slide]"

— xandy

यही कारण है कि मुझे सभी डेटा विशेषताओं का चयन करने में मदद मिली (मूल्य की परवाह किए बिना): $('*[data-slide]')आप इसे उदाहरण के लिए उपयोग कर सकते हैं$('*[data-slide]').each( function() { ... });

— काई नैक

Answer 1

आपको currentएक गुणक चयनकर्ता के मान को इंजेक्ट करना होगा :

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

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

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

Comments

@ जापानिस, आप कर सकते हैं $("ul").find(el + "[data-slide='" + current +"']");।

— Frédéric Hamidi

@ c00lryguy, jQuery UI एक को परिभाषित करता है, और चारों ओर स्टैंडअलोन कार्यान्वयन हैं। ऐसा लगता है कि इसे jQuery कोर में जोड़ने के प्रयासों को अस्वीकार कर दिया गया था । दो बार ।

— फ्रेडरिक हमीदी

इसी तरह के पोस्ट पर इस उत्तर में फिल्टर फ़ंक्शन का एक उदाहरण है

— 16-28 बजे जूल

मुझे चिंता है कि अगर jQuery .data (...) फ़ंक्शन के माध्यम से डेटा जोड़ा गया तो यह काम नहीं करेगा, क्योंकि यह हमेशा एक विशेषता को प्रस्तुत नहीं करता है और soemtimes ब्राउज़र विशिष्ट भंडारण तंत्र का उपयोग करता है। एक और कारण जो मैं चाहता हूं कि jQuery कोर में एक डेटा विशिष्ट चयनकर्ता था।

— एरोनल्स

ध्यान दें कि यह उन तत्वों के लिए काम नहीं करता है जहां आप $ ('# तत्व') के साथ डेटा सेट करते हैं। डेटा ('कुछ-एट-नेम', मूल्य); लेकिन केवल हार्डकोड विशेषता वाले लोगों के लिए। मुझे यह समस्या है और इसे सीधे $ ('# तत्व') विशेषता लिखकर डेटा सेट करने के लिए काम करना है। attr ('data-some-att-name', value);

— पावेल

Answer 2

यदि आप वह सब नहीं लिखना चाहते हैं, तो डेटा विशेषता द्वारा क्वेरी करने का एक छोटा तरीका है:

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

FYI करें: http://james.padolsey.com/javascript/a-better-data-selector-for-ququery/

Comments

आप में से जो लोग देखभाल करते हैं, उनके लिए <ul><li data-slide="item"></li></ul>इस उत्तर का चयन करने वाला ढांचा अपरिभाषित हो जाएगा, इसलिए यह उपयोगकर्ता के परिदृश्य को देखते हुए काम नहीं करेगा। यह उत्तर संरचना के लिए काम करेगा <ul data-slide="item"><li></li></ul> जबकि मैं समझता हूं कि संक्षिप्तता के कारण इसकी लोकप्रियता क्यों है, यह तकनीकी रूप से एक गलत उत्तर है। jsfiddle.net/py5p2abL/1

— akousmata

इसे एक सरणी के रूप में मानना ​​मत भूलना। [0]पहले तत्व को देखने के लिए उपयोग करें ।

— अमीना नूरैनी

एक विचित्र पक्ष प्रभाव ... इस विधि ने काम नहीं किए जाने पर डेटा विशेषता के साथ तत्व के मिलान का .find("[data-attrib='value']")काम किया। मुझे पता नहीं है कि मान डेटा विशेषताएँ jQuery द्वारा जोड़े गए थे या नहीं ...

— त्रुटि

यह विचित्र नहीं है क्योंकि दो उत्तर 2 अलग चीजें करते हैं। $.findविशेष रूप से उस तत्व के वंशज का पता लगाता है , लेकिन चयनकर्ता स्ट्रिंग में फ़िल्टर सिंटैक्स का उपयोग करके परिणाम को फ़िल्टर किया जाएगा।

— फिल

Answer 3

[ Data -x = ...] के साथ खोज करने पर, यह 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

Comments

$.fn.filterByDataशानदार है; हालाँकि, यह कॉपी-पेस्ट करने वालों के लिए एक चेतावनी है ... आपको केवल टैग $('<b>').filterByData('x', 1)ढूंढने होंगे । यदि आप उस हिस्से की कॉपी-पेस्ट करते हैं ... आप फ़िल्टर करने से पहले "1" पर सेट हो जाएंगे । <b>data-x="1".data(x, 1)data-x

— WEBjuju

Answer 4

मैंने साइको brm के फ़िल्टरबायडाटा एक्सटेंशन में सुधार किया को jQuery में ।

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

(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/

Answer 5

JQuery के बिना, ES6

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

मुझे पता है कि सवाल JQuery के बारे में है, लेकिन पाठकों को शुद्ध JS विधि चाहिए।

Answer 6

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

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

यह मेरा HTML कोड है:

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

Answer 7

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

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

धन्यवाद

Answer 8

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

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

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

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

Answer 9

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

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