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') ( документы ) должны это сделать, если я не понял неправильно.

Демо:

$(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>