时间戳

首页 > 解决方案 > jQuery在匹配的元素类型中获取索引

javascript - jQuery在匹配的元素类型中获取索引

问题描述

有没有比我所拥有的更好的方法来按类型检测元素的索引？<span>s 被 s 隔开<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>

标签： javascriptjqueryhtmldom

解决方案

编辑：我之前的回答是错误的，因为我误解了文档（尽管我相信它会比我认为的工作方式更合乎逻辑），对此感到抱歉！

更新的答案

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

它需要兄弟姐妹 span + 本身并返回其在其中的位置。

演示：

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

推荐阅读