jQuery දත්ත-ගුණාංග අගය මත පදනම් වූ මූලද්‍රව්‍යයක් සොයා ගන්නේ කෙසේද?

මට පහත දැක්වෙන අවස්ථාව තිබේ:

var el = 'li';

<li>පිටුවේ 5 ක් ඇත, එක් එක් data-slide=numberගුණාංගය ඇත (අංකය පිළිවෙලින් 1,2,3,4,5) .

මට දැන් සක්‍රිය විනිවිදක අංකය සොයා ගැනීමට අවශ්‍ය වී ඇති var current = $('ul').data(current);අතර එය එක් එක් විනිවිදක වෙනස්වීම් මත සිතියම් ගත කර යාවත්කාලීන කර ඇත.

මෙතෙක් මා දැරූ උත්සාහයන් අසාර්ථක වී ඇති අතර, වර්තමාන විනිවිදකයට ගැලපෙන තේරීම් කාරකය තැනීමට උත්සාහ කිරීම:

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

කිසිවක් නොගැලපේ / ආපසු එවන්නේ නැත…

මට liකොටස දෘ c කේත කිරීමට නොහැකි වීමට හේතුව මෙය පරිශීලකයාට ප්‍රවේශ විය හැකි විචල්‍යයක් වන අතර එය අවශ්‍ය නම් වෙනත් මූලද්‍රව්‍යයකට වෙනස් කළ හැකි බැවින් එය සැමවිටම නොවිය හැකිය li.

මට නැතිවූ දේ පිළිබඳ කිසියම් අදහසක් තිබේද?

ඔබ අගය එන්නත් කිරීමට ඇති currentවූ බවට ලක්ෂණය සමාන වේ තේරීම්:

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

පැරණි ජාවාස්ක්‍රිප්ට් පරිසරයන් සඳහා ( ES5 සහ ඊට පෙර):

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

ඔබට ඒ සියල්ල ටයිප් කිරීමට අවශ්‍ය නැතිනම්, දත්ත ගුණාංගයෙන් විමසීමට කෙටි ක්‍රමයක් මෙන්න:

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

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

[Data-x = ...] සමඟ සෙවීමේදී, විමසිල්ලෙන් සිටින්න, එය 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

ඒ වෙනුවට ඔබට මෙය භාවිතා කළ හැකිය:

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

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

JQuery නොමැතිව, ES6

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

ප්‍රශ්නය JQuery ගැන බව මම දනිමි, නමුත් පා readers කයන්ට පිරිසිදු JS ක්‍රමයක් අවශ්‍ය විය හැකිය.

මම මනෝ බ්‍රම්ගේ ෆිල්ටර්බයිඩේටා දිගුව 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/

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.

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

මෙය වඩා හොඳ වනු ඇතැයි මම බලාපොරොත්තු වෙමි

ස්තූතියි

$("ul [data-slide='" + current +"']");පහත සඳහන් ව්‍යුහය සඳහා මෙම තේරීම් කාරකය ක්‍රියා කරයි:

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

මෙය $("ul[data-slide='" + current +"']");ක්‍රියාත්මක වන අතර:

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

මූලද්‍රව්‍ය වර්ගය කල්තියා නොදැන මෙම කාර්යය කරන්නේ කෙසේද යන්න පිළිබඳ ඔහුගේ මුල් ප්‍රශ්නයට ආපසු යමින්, පහත දැක්වෙන්නේ මෙයයි:

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