jQuery কীভাবে একটি ডেটা-অ্যাট্রিবিউট মানটির উপর ভিত্তি করে একটি উপাদান খুঁজে পাবে?

Question

আমি নিম্নলিখিত পরিস্থিতি পেয়েছি:

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যে অংশটি হার্ডকোড করতে পারছি না তার কারণ হ'ল এটি একটি ব্যবহারকারী অ্যাক্সেসযোগ্য ভেরিয়েবল যা প্রয়োজন হলে বিভিন্ন উপাদানে পরিবর্তন করা যায়, তাই এটি সর্বদা একটি নাও হতে পারে li।

আমি কি অনুপস্থিত তার কোন ধারণা?

Comments

আপনি যে .find(el+[data-slide=+current+]);কোডটি লিখছেন তা কি নিশ্চিত ? দেখে মনে হচ্ছে আপনি কিছু "[data-slide]"

— এক্সটেনশন

এটিই আমাকে সমস্ত ডেটা অ্যাট্রিবিউটগুলি (মান নির্বিশেষে) নির্বাচন করতে সহায়তা করেছে : $('*[data-slide]')আপনি উদাহরণ সহ এটি ব্যবহার করতে পারেন$('*[data-slide]').each( function() { ... });

— কাই নোক

Answer 1

আপনাকে currentএকটি অ্যাট্রিবিউট ইক্যুয়াল সিলেক্টরের মধ্যে মানটি ইনজেক্ট করতে হবে :

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

পুরানো জাভাস্ক্রিপ্ট পরিবেশের জন্য ( ES5 এবং এর আগের):

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

Comments

@Jannis, আপনি কাজ করতে পারে $("ul").find(el + "[data-slide='" + current +"']");।

— ফ্রিডরিক হামিদি

@ c00lryguy, jQuery UI এর একটি নির্দিষ্ট করে এবং রয়েছে চারপাশে স্বতন্ত্র বাস্তবায়ন রয়েছে। দেখে মনে হচ্ছে এটি jQuery কোর যুক্ত করার চেষ্টা প্রত্যাখ্যান করা হয়েছিল । দু'বার ।

— ফ্রিডরিক হামিদি

অনুরূপ পোস্টে এই উত্তরের ফিল্টার ফাংশনের একটি উদাহরণ রয়েছে

— ড্রাজাস

আমি উদ্বিগ্ন যে jQuery .data (...) ফাংশন মাধ্যমে ডেটা যুক্ত করা হলে এটি কাজ করবে না, যেহেতু এটি সর্বদা একটি বৈশিষ্ট্য রেন্ডার করে না এবং সোমটাইমগুলি ব্রাউজার নির্দিষ্ট স্টোরেজ মেকানিজম ব্যবহার করে। আমি চাই যে আরও একটি কারণ jQuery কোর একটি ডেটা নির্দিষ্ট নির্বাচক ছিল।

— অ্যারোনলএস

লক্ষ্য করুন যে elements ('# উপাদান') দিয়ে আপনি ডেটা সেট করেছেন এমন উপাদানগুলির জন্য এটি কাজ করে না data তথ্য ('কিছু-নাম-নাম', মান); তবে কেবল তাদের জন্য হার্ডকডযুক্ত বৈশিষ্ট্য। আমি এই সমস্যাটি পেয়েছি এবং সরাসরি attrib ('# এলিমেন্ট') অ্যাট্রিবিউটটি লিখে এটি ডেটা সেট করে কাজ করতে পারি att

— পাভেল

Answer 2

আপনি যদি সমস্ত কিছু টাইপ করতে না চান তবে ডেটা অ্যাট্রিবিউট দ্বারা ক্যোয়ারির আরও একটি ছোট উপায়:

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

এফওয়াইআই: http://james.padolsey.com/javascript/a-better-data-selector- for- jquery/

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 দ্বারা যুক্ত হয়েছিল

— কিনা

এটি উদ্ভট নয় কারণ দুটি উত্তর দুটি পৃথক কাজ করে। $.findবিশেষত সেই উপাদানটির বংশধরদের সন্ধান করে তবে নির্বাচক স্ট্রিংয়ে ফিল্টার সিনট্যাক্স ব্যবহার করলে ফলাফলগুলি সহজেই ফিল্টার হবে।

— ফিল

Answer 3

[ডেটা-এক্স = ...] দিয়ে অনুসন্ধান করার সময়, নজর রাখুন, এটি 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উজ্জ্বল হয়; যাইহোক, এই সেখানে আউট কপি-pasters জন্য একটি সতর্কবাণী ... আপনি শুধুমাত্র প্রয়োজন $('<b>').filterByData('x', 1)এটি <b>দিয়ে ট্যাগ data-x="1"। আপনি যদি .data(x, 1)অংশটি অনুলিপি করেন ... আপনি data-xফিল্টারিংয়ের আগে "1" এ সেট করবেন ।

— ওয়েজবুজু

Answer 4

আমি সাইকো বিএম এর ফিল্টার বাইডাটা এক্সটেনশনের মাধ্যমে উন্নতি করেছি 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

জিকুয়ারি ছাড়াই, ইএস

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

আমি জানি প্রশ্নটি জিকুয়েরি সম্পর্কে, তবে পাঠকরা খাঁটি জেএস পদ্ধতি চাইবেন।

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

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 + "']");