jQuery获取匹配元素类型之间的索引

Question

是否有比我现有的方法更好的按类型检测元素索引的方法？ <span>由<em>隔开。 各种各样的修改向我暗示我仍然是一个无知的程序员。

target.parent('td').children('span').index(target)

HTML看起来像这样。 我想获取“时间”的索引3，上面的方法确实如此。 target.index('span')返回27，所以我不知道。

<td>
    <span>once</span>
    <em> </em>
    <span>upon</span>
    <em> </em>
    <span>a</span>
    <em> </em>
    <span>time</span>
    <em> </em>
    <span>in</span>
    <em> </em>
    <span>Mexico</span>
    <em> </em>
</td>

Answer 1

编辑 ：我先前的回答是错误的，因为我误解了文档（即使我认为我认为它的工作方式会更加合乎逻辑），对此感到抱歉！

更新的答案

target.siblings('span').addBack().index(target)应该稍微提高一点效率，因为它不会来回遍历DOM。

它采用兄弟姐妹跨度+自身，并返回其在其中的位置。

演示：

 $(function() { var target = $('#time'); var position = target.siblings('span').addBack().index(target); console.log(position); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <td> <span>before span 1</span> <span>before span 2</span> <span>before span 3</span> <span>before span 4</span> </td> <td> <span>once</span> <em> </em> <span>upon</span> <em> </em> <span>a</span> <em> </em> <span id="time">time</span> <em> </em> <span>in</span> <em> </em> <span>Mexico</span> <em> </em> </td> </table> 

上一个（错误的）答案

只是target.index('span') （ docs ）应该这样做，除非我误解了。

演示：

 $(function() { console.log($('#span1').index('span')); console.log($('#span2').index('span')); console.log($('#span3').index('span')); console.log($('#span4').index('span')); console.log($('#span5').index('span')); console.log($('#span6').index('span')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td> <span id="span1">once</span> <em> </em> <span id="span2">upon</span> <em> </em> <span id="span3">a</span> <em> </em> <span id="span4">time</span> <em> </em> <span id="span5">in</span> <em> </em> <span id="span6">Mexico</span> <em> </em> </td>