मान लीजिए कि मेरे पास यह मार्कअप है:
<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पहले से नहीं बल्कि हर क्लिक पर s की व्यूह रचना करनी होगी :
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>डेलिगेट और लाइव का उपयोग करना आसान है, लेकिन अगर आपके पास कोई और ली नहीं है: गतिशील रूप से जोड़ा गया तो आप सामान्य बाइंड / क्लिक के साथ ईवेंट ह्रास का उपयोग कर सकते हैं। इस पद्धति का उपयोग करते हुए कुछ प्रदर्शन लाभ होना चाहिए क्योंकि नए मिलान तत्वों के लिए DOM की निगरानी नहीं करनी होगी। कोई वास्तविक संख्या नहीं मिली, लेकिन यह समझ में आता है :)
$("#wizard").click(function (e) {
var source = $(e.target);
if(source.is("li")){
// alert index of li relative to ul parent
alert(source.index());
}
});आप इसे jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/ पर देख सकते हैं
फिर भी एक और तरीका
$("#wizard li").click(function ()
{
$($(this),'#wizard"').index();
});