ধরা যাক আমার এই মার্কআপটি রয়েছে:
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>
এবং আমি এই jQuery আছে:
$("#wizard li").click(function () {
// alert index of li relative to ul parent
});
আমি liযখন এটি ক্লিক করব তখন তার পিতামাতার সাথে তুলনামূলক সন্তানের সূচকটি কীভাবে পেতে পারি li?
উদাহরণস্বরূপ, আপনি যখন "পদক্ষেপ 1" ক্লিক করেন, alert"0" সহ একটি পপ আপ করা উচিত।
উত্তর:
$("#wizard li").click(function () {
console.log( $(this).index() );
});
তবে প্রতিটি তালিকার আইটেমের জন্য একটি ক্লিক হ্যান্ডলার সংযুক্তি না করে ব্যবহার করা ভাল (পারফরম্যান্স ওয়াইস) delegateযা দেখতে দেখতে এটি ব্যবহার করা ভাল :
$("#wizard").delegate('li', 'click', function () {
console.log( $(this).index() );
});
JQuery 1.7+ এ আপনার ব্যবহার করা উচিত on। #wizardপ্রতিনিধি ইভেন্টের মতো কাজ করে নীচের উদাহরণটি ইভেন্টটিকে উপাদানটির সাথে আবদ্ধ করে :
$("#wizard").on("click", "li", function() {
console.log( $(this).index() );
});
কিছুটা এইরকম:
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
alert("index is: " + index)
});
আপনি যদি না চান তবে এটি সম্পন্ন করার জন্য jQuery এর মতো বড় লাইব্রেরির প্রয়োজন নেই। অন্তর্নির্মিত ডিওএম ম্যানিপুলেশন সহ এটি অর্জন করতে, liএকটি অ্যারেতে ভাইবোনদের সংগ্রহ পান এবং indexOfক্লিক করে সেই অ্যারেতে ক্লিক করা উপাদানটি পরীক্ষা করে দেখুন ।
const lis = [...document.querySelectorAll('#wizard > li')];
lis.forEach((li) => {
li.addEventListener('click', () => {
const index = lis.indexOf(li);
console.log(index);
});
});<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>বা, ইভেন্ট প্রতিনিধি সহ:
const lis = [...document.querySelectorAll('#wizard li')];
document.querySelector('#wizard').addEventListener('click', ({ target }) => {
// Make sure the clicked element is a <li> which is a child of wizard:
if (!target.matches('#wizard > li')) return;
const index = lis.indexOf(target);
console.log(index);
});<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>বা, যদি শিশু উপাদানগুলি গতিশীলভাবে পরিবর্তিত হতে পারে (টুডো তালিকার মতো), তবে আপনাকে liআগে থেকে বরং প্রতিটি ক্লিকে গুলি এর অ্যারে তৈরি করতে হবে :
const wizard = document.querySelector('#wizard');
wizard.addEventListener('click', ({ target }) => {
// Make sure the clicked element is a <li>
if (!target.matches('li')) return;
const lis = [...wizard.children];
const index = lis.indexOf(target);
console.log(index);
});<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>ডেলিগেট এবং লাইভ ব্যবহার করা সহজ তবে আপনার যদি আর কোনও লি না থাকে: গতিশীলভাবে আপনি যুক্ত করে থাকেন তবে ইভেন্টের ডেলাগেশনটি সাধারণ বাইন্ড / ক্লিকের সাথেও ব্যবহার করতে পারেন। এই পদ্ধতিটি ব্যবহার করে কিছু পারফরম্যান্স লাভ করা উচিত যেহেতু নতুন মিলনের উপাদানগুলির জন্য ডোমকে নজরদারি করতে হবে না। কোনও আসল নম্বর পাওয়া যায় নি তবে তা বোঝা যায় :)
$("#wizard").click(function (e) {
var source = $(e.target);
if(source.is("li")){
// alert index of li relative to ul parent
alert(source.index());
}
});
আপনি এটি জেএসফিডেলে পরীক্ষা করতে পারেন: http://jsfiddle.net/jimmysv/4Sfdh/1/
তবুও অন্য উপায়
$("#wizard li").click(function ()
{
$($(this),'#wizard"').index();
});