0

如何计算跨度的数量，直到具有特定 ID 的跨度。

例如：

直到 id="a5" 的跨度是第6 个跨度。

<table border="3">
    <tr>
        <td><span id="a2" class="arrow_icon a6" isClicked="0"></span></td>
        <td><span id="a1" class="arrow_icon a1" isClicked="0"></span></td>
        <td><span id="a3" class="arrow_icon a11" isClicked="0"></span></td>
        <td><span id="a4" class="arrow_icon a16" isClicked="0"></span></td>
        <td><span id="a6" class="arrow_icon a2" isClicked="0"></span></td>
    </tr>
    <tr>
        <td><span id="a5" class="arrow_icon a21" isClicked="0"></span></td>
        <td><span id="a7" class="arrow_icon a7" isClicked="0"></span></td>
        <td><span id="a8" class="arrow_icon a12" isClicked="0"></span></td>
        <td><span id="a9" class="arrow_icon a17" isClicked="0"></span></td>
        <td><span id="a10" class="arrow_icon a22" isClicked="0"></span></td>
    </tr>
</table>

我试过类似的东西：

var count = 0;
$("span:first").nextUntil("#a5").andSelf().each(function(index) {
     count++;
});
alert(count); // should alert '6'

任何帮助表示赞赏！

4

5 回答 5

2

您不能使用.nextUntil()，因为它会查看兄弟姐妹，并且示例中并非所有 span 元素都是兄弟姐妹。将选择器放入$(...)应该产生一个 jQuery 对象，该对象尊重元素在 DOM 中的顺序，所以可能只是：

var count = 0;
$("span").each(function(i) {
    count++;
    if (this.id === "a5") {return false;} // breaks out of loop when the id is found
});

console.log(count);
于 2013-09-22T22:06:01.417 回答
1

首先，您的初始选择在 first 中仅包含一个span 元素<td>...</td>。所以你应该把它改成相当$("span")...。

其次，nextUntil函数在所选项目的兄弟姐妹中搜索，只需查看 jQuery 文档即可确认：

下一个直到规范

这意味着，您的跨度集合更改为 ... 零。为什么？它们的直接父母是<td>...</td>标签，其中仅包含一个跨度，因此它们实际上都没有任何兄弟姐妹。

补救措施很简单：

var count = 0;

$("span").each(function(i, e){
    if(!$(this).is("#a5"))
        count++; //count it up
    else
        return false; //exit the each function
});

alert(count); //alerts '5', as it should

它起作用的主要原因是因为选择已经按照它们在 DOM 中的呈现方式进行了排序。否则很难用它做任何事情。

干杯

于 2013-09-22T22:12:55.210 回答
1

只需用 循环遍历所有跨度.each()，并使用索引（循环迭代次数）作为计数器：

var c;
$("span").each(function(index, element) {
    if(element.id == "a5") {
        c = index; // set counter to current index value
        return false; // break the each loop
    }
});
alert(c);

http://jsfiddle.net/8rPcN/

于 2013-09-22T22:07:44.983 回答
1

你不能使用 nextUntil() 因为他们不是兄弟姐妹。这是我能想到的最好的方法。

var a5index;
$('table span').each(function(idx){
  if( $(this).is('#a5')){
    a5Index = idx;
    return true; // No reason to keep going after we find it...
  }
});
于 2013-09-22T22:10:40.710 回答
0

使用 return false 尽早退出 .each 循环

var count = 0;
var toId = "a5";
$("span").each(function(){
   count++;
   if(this.id == toId) {
      return false;
   }
});
console.log(count);

或使用.index使用单行

console.log( $("span").index($("#a5")) );
于 2013-09-22T21:59:49.987 回答