jQuery ডেটা অ্যাট্রিবিউট মান দ্বারা উপাদান সন্ধান করে


108

আমার নীচের মতো কয়েকটি উপাদান রয়েছে:

<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

(শূন্য) data-slideএর গুণকের মান আছে এমন উপাদানটিতে আমি কীভাবে একটি ক্লাস যুক্ত করতে পারি 0?

আমি বিভিন্ন সমাধানের চেষ্টা করেছি কিন্তু কিছুই কার্যকর হয়নি। একটি উদাহরণ:

$('.slide-link').find('[data-slide="0"]').addClass('active');

কোন ধারণা?


4
এখানে কিছু বিষয় ব্যাখ্যা করার জন্য, এটি কাজ না করার কারণ হ'ল কারণ আপনি এর .slide-linkগুণাবলী সহ বংশধরদের সন্ধান করার চেষ্টা করছেন [data-slide="0"]। যেহেতু কোনও কিছু নিজের বংশধর হতে পারে না, তাই এর ফিরে আসার মতো কিছুই নেই। যাইহোক, যদি এই লিঙ্কগুলির চারপাশে আপনার একটি মোড়ক থাকে, তবে এটি কাজ করতে পারে:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');
— ডোনডেস্টা মাইকুলি

আরও দেখুন stackoverflow.com/q/4191386/292060
— goodeye

উত্তর:


233

অ্যাট্রিবিউট ইক্যুয়াল সিলেক্টর ব্যবহার করুন

$('.slide-link[data-slide="0"]').addClass('active');

Fiddle Demo

.অনুসন্ধান()

এটা গাছ নিচে কাজ করে

কোনও নির্বাচক, জিকুয়ারি বস্তু বা উপাদান দ্বারা ফিল্টার করা মিলের উপাদানগুলির বর্তমান সেটে প্রতিটি উপাদানের বংশধরকে পান।


4
আমার খারাপ। আমি চেষ্টা করেছিলাম কিন্তু ভুল জায়গায় (আমার উপাদানগুলিকে গতিশীলভাবে যুক্ত করার আগে ...)। যাইহোক প্রচেষ্টা জন্য ধন্যবাদ! ঠিকভাবে কাজ করে.
— মিস্টার ইউপিডাউন

@ মিআরসিপডাউন আপনাকে সাহায্য করতে খুশি :)
— তুষার গুপ্ত - কুরিউস্তুশার

4
কি দারুন! এই সমাধান মহান! কয়েক ঘন্টা সমস্যা ছিল তবে এটি এটি স্থির করেছে!

var slidernumber = "0";ধ্রুবকের পরিবর্তে আমি কীভাবে এটি একটি পরিবর্তনশীল মানের সাথে সমান করব "0"?
— টনি গিল

যদি কোনও কারণে আপনি সেখানে নির্দিষ্ট শ্রেণীর উপস্থিতির উপর নির্ভর করতে না পারেন তবে আপনি ঠিক প্রথম বিভাগের জন্য wild ('* [ডেটা-স্লাইড = "0"]') এর মতো ওয়াইল্ডকার্ড ব্যবহার করতে পারেন addডক্লাস ('সক্রিয়') ;
— শানমিসি


6

আমি স্ট্রিংয়ের পরিবর্তে ভেরিয়েবলের সাথে একই সমাধানটি অনুসন্ধান করেছি।
আমি আশা করি আমি আমার সমাধানে কাউকে সাহায্য করতে পারি :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

3

আপনি andSelf()মোড়ক ডিওএম ধারণ করার জন্যও পদ্ধতিটি ব্যবহার করতে পারেন তারপরে find()আপনার ধারণা হিসাবে কাজ করতে পারে

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})
.active {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.