blocks|key|1002156|text|$("#wizard+li").click(function+()+{
++++console.log(+$(this).index()+);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1002157|然而，与其为每个列表项附加一个单击处理程序，使用delegate会更好(性能更好)，如下所示：|unstyled|offset|length|style|CODE|1002158|$("#wizard").delegate('li',+'click',+function+()+{
++++console.log(+$(this).index()+);
});|1002159|在jQuery+1.7%2B中，您应该使用on。下面的示例将事件绑定到#wizard元素，其工作方式类似于委托事件：|1002160|$("#wizard").on("click",+"li",+function()+{
++++console.log(+$(this).index()+);
});|1002161|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/delegate/|1|http://api.jquery.com/on/^0|0|O|8|O|8|0|0|0|J|2|X|7|J|2|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|11|8|@$G|12|H|13|I|J]]|9|@$G|14|H|15|1|16]]|A|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|18|8|@$G|19|H|1A|I|J]|$G|1B|H|1C|I|J]]|9|@$G|1D|H|1E|1|1F]]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$B|C]]|$1|Q|3|-4|5|F|7|1H|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<pre><code>$("#wizard li").click(function () {
    console.log( $(this).index() );
});
</code></pre>

<p>However rather than attaching one click handler for each list item it is better (performance wise) to use <a href="http://api.jquery.com/delegate/"><code>delegate</code></a> which would look like this:</p>

<pre><code>$("#wizard").delegate('li', 'click', function () {
    console.log( $(this).index() );
});
</code></pre>

<p>In jQuery 1.7+, you should use <a href="http://api.jquery.com/on/"><code>on</code></a>. The below example binds the event to the <code>#wizard</code> element, working like a delegate event:</p>

<pre><code>$("#wizard").on("click", "li", function() {
    console.log( $(this).index() );
});
</code></pre>


blocks|key|787931|text|Delegate和Live很容易使用，但是如果你不想动态添加更多的li:s，你也可以使用事件延迟和普通的bind/click。使用这种方法应该会有一些性能提升，因为不需要监视DOM中是否有新的匹配元素。我没有任何实际的数字，但这是有意义的:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787932|$("#wizard").click(function+(e)+{
++++var+source+=+$(e.target);
++++if(source.is("li")){
++++++++//+alert+index+of+li+relative+to+ul+parent
++++++++alert(source.index());
++++}
});|code-block|syntax|javascript|787933|你可以在jsFiddle：http://jsfiddle.net/jimmysv/4Sfdh/1/上测试它。|offset|length|787934|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jimmysv/4Sfdh/1/^0|0|0|D|10|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Delegate and Live are easy to use but if you won't have any more li:s added dynamically you could use event delagation with normal bind/click as well. There should be some performance gain using this method since the DOM won't have to be monitored for new matching elements. Haven't got any actual numbers but it makes sense :)</p>

<pre><code>$("#wizard").click(function (e) {
    var source = $(e.target);
    if(source.is("li")){
        // alert index of li relative to ul parent
        alert(source.index());
    }
});
</code></pre>

<p>You could test it at jsFiddle: <a href="http://jsfiddle.net/jimmysv/4Sfdh/1/" rel="nofollow">http://jsfiddle.net/jimmysv/4Sfdh/1/</a></p>


blocks|key|787945|text|类似于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787946|$("ul#wizard+li").click(function+()+{
++var+index+=+$("ul#wizard+li").index(this);
++alert("index+is:+"+%2B+index)
});|code-block|syntax|javascript|787947|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>something like: </p>

<pre><code>$("ul#wizard li").click(function () {
  var index = $("ul#wizard li").index(this);
  alert("index is: " + index)
});
</code></pre>


blocks|key|787949|text|看看这个example。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|787950|$("#wizard+li").click(function+()+{
++++alert($(this).index());+//+alert+index+of+li+relative+to+ul+parent
});|code-block|syntax|javascript|787951|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/KL3Vm/^0|4|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Take a look at this <a href="http://jsfiddle.net/KL3Vm/" rel="noreferrer">example</a>. </p>

<pre><code>$("#wizard li").click(function () {
    alert($(this).index()); // alert index of li relative to ul parent
});
</code></pre>


blocks|key|787957|text|还有另一种方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787958|$("#wizard+li").click(function+()+
{
++++$($(this),'#wizard"').index();
});|code-block|syntax|javascript|787959|演示https://jsfiddle.net/m9xge3f5/|offset|length|787960|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/m9xge3f5/^0|0|0|2|U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Yet another way</p>

<pre><code>$("#wizard li").click(function () 
{
    $($(this),'#wizard"').index();
});
</code></pre>

<p>Demo
<a href="https://jsfiddle.net/m9xge3f5/" rel="nofollow noreferrer">https://jsfiddle.net/m9xge3f5/</a></p>


blocks|key|1002299|text|如果您不想这样做，则不需要像jQuery这样的大型库来完成此任务。要使用内置的DOM操作来实现这一点，需要在一个数组中获得一个li同级元素的集合，单击时，检查该数组中的indexOf元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1002300|​|1002301|const+lis+=+[...document.querySelectorAll('#wizard+>+li')];
lis.forEach((li)+=>+{
++li.addEventListener('click',+()+=>+{
++++const+index+=+lis.indexOf(li);
++++console.log(index);
++});
});|code-block|syntax|javascript|1002302|<ul+id="wizard">
++++<li>Step+1</li>
++++<li>Step+2</li>
</ul>|1002303|1002304|或者，使用事件委派：|1002305|1002306|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);
});|1002307|<ul+id="wizard">
++++<li>Step+1</li>
++++<li>Step+2</li>
</ul>|1002308|1002309|或者，如果子元素可能会动态变化(就像使用待办事项列表一样)，那么您必须在每次单击时构造li数组，而不是预先构造：|1002310|1002311|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);
});|1002312|<ul+id="wizard">
++++<li>Step+1</li>
++++<li>Step+2</li>
</ul>|1002313|1002314|entityMap^0|1R|2|2C|7|0|0|0|0|0|0|0|0|0|0|17|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1G|8|@]|D|@]|E|$]]|$1|R|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1K|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|Z|3|G|5|6|7|1O|8|@]|D|@]|E|$]]|$1|10|3|11|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|12|3|13|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|14|3|G|5|6|7|1R|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|16|$]]

<p>There's no need to require a big library like jQuery to accomplish this, if you don't want to. To achieve this with built-in DOM manipulation, get a collection of the <code>li</code> siblings in an array, and on click, check the <code>indexOf</code> the clicked element in that array.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const lis = [...document.querySelectorAll('#wizard &gt; li')];
lis.forEach((li) =&gt; {
  li.addEventListener('click', () =&gt; {
    const index = lis.indexOf(li);
    console.log(index);
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="wizard"&gt;
    &lt;li&gt;Step 1&lt;/li&gt;
    &lt;li&gt;Step 2&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>Or, with event delegation:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const lis = [...document.querySelectorAll('#wizard li')];
document.querySelector('#wizard').addEventListener('click', ({ target }) =&gt; {
  // Make sure the clicked element is a &lt;li&gt; which is a child of wizard:
  if (!target.matches('#wizard &gt; li')) return;
  
  const index = lis.indexOf(target);
  console.log(index);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="wizard"&gt;
    &lt;li&gt;Step 1&lt;/li&gt;
    &lt;li&gt;Step 2&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>Or, if the child elements may change dynamically (like with a todo list), then you'll have to construct the array of <code>li</code>s on every click, rather than beforehand:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const wizard = document.querySelector('#wizard');
wizard.addEventListener('click', ({ target }) =&gt; {
  // Make sure the clicked element is a &lt;li&gt;
  if (!target.matches('li')) return;
  
  const lis = [...wizard.children];
  const index = lis.indexOf(target);
  console.log(index);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="wizard"&gt;
    &lt;li&gt;Step 1&lt;/li&gt;
    &lt;li&gt;Step 2&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


<p>Let's say I have this markup:</p>

<pre><code>&lt;ul id="wizard"&gt;
    &lt;li&gt;Step 1&lt;/li&gt;
    &lt;li&gt;Step 2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And I have this jQuery:</p>

<pre><code>$("#wizard li").click(function () {
    // alert index of li relative to ul parent
});
</code></pre>

<p>How can I get the index of the child <code>li</code> relative to it's parent, when clicking that <code>li</code>?</p>

<p>For example, when you click "Step 1", an <code>alert</code> with "0" should pop up.</p>


Get index of element as child relative to parent

jQuery

假设我有这样的标记：<ul id="wizard">    <li>Step 1</li>    <li>Step 2</li></ul>我有这个jQuery：$("#wizard li").click(function () {    // alert index of li relative to ul paren...

问获取元素的索引作为相对于父元素的子元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取元素的索引作为相对于父元素的子元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取元素的索引作为相对于父元素的子元素
EN