使用jQuery计算两个特定行之间的表格行数

Question

<table>
  <tr id="parent_1">
    <td>Parent 1</td>
  </tr>
  <tr class="child">
    <td>Child 1</td>
  </tr>
  <tr class="child">
    <td>Child 2</td>
  </tr>
  ...
  <tr id="parent_2">
    <td>Parent2</td>
  </tr>
  ...
</table>

使用jQuery如何找到在 parent_1 和 parent_2 之间的子行数？

编辑：抱歉，没有清楚地说明这只是一个示例，表格可能包含任意数量的父行和子行。

- Callum

---

Chatuman的解决方案是简洁和性能之间的最佳折衷。 - vladr

Answer 1

这会帮助你得到你想要的东西

var childCount = ($('#parent_2').get(0).rowIndex - $('#parent_1').get(0).rowIndex) - 1;

- Chatuman

---

+1 很棒！但为什么要费心找中间人呢？直接访问API：document.getElementById('parent_2').rowIndex - document.getElementById('parent_1').rowIndex - 1; - vladr

不错的答案。此外，@Vlad 是正确的：在这种情况下，jQuery 对你没有任何帮助。 - Crescent Fresh

+1 弗拉德的评论！当然，这假设没有其他既不是“父级”也不是“子级”的行，这很可能，但问题并不完全清楚。 - bobince

Answer 2

这个：

$('#parent_1 ~ .child:not(#parent_2 ~ *)').size()

翻译：匹配所有在#parent_1之后，并且是child类的同级元素，但不匹配那些在#parent_2之后，也是child类的同级元素。

- Miles

---

这正是我希望有人能想到的。谢谢你教给我新东西！;) - Samantha Branham

@Vlad：jQuery不使用XPATH。 - Crescent Fresh

这是一个CSS 3选择器，而不是XPath，但你的观点是正确的 - 这可能不是最有效的解决方案。 - Miles

@crescentfres - 我错了，抱歉，我想到的是Prototype；但是根据jQuery源代码，上面的选择器仍然会比Chatuman的解决方案多做一个数量级的工作（即调用DOM API）。 :) - vladr

@Miles，抱歉，我的想法在Prototype上，它将尝试使用浏览器内置的xpath支持（document.evaluate功能）。 - vladr

如果我不需要处理数百万行的表格（99.9% 的情况下，除非你想用数据轰炸用户），我仍然更愿意使用这个解决方案。我可能会稍后对这些行进行某些操作，如果你懂 jQuery，阅读起来会更容易。 - Samantha Branham

Answer 3

脑海中浮现的第一个想法是，我相信有一些复杂的方法可以选择相关元素（这意味着你只需要执行$(selector).length），但我暂时想不到。

var doCount = false;
var numberOfChildren = 0;

$('tr').each(function(i){
    if($(this).is("#parent_2"))
        doCount = false;

    if(count)
        numberOfChildren++;

    if($(this).is("#parent_1"))
        doCount = true;
});

- Stuart B

---

-1 - 性能差；即使您有100万行数据，但只需要计算其中两行（恰好在表的末尾），它仍会扫描整个表中的所有行。 - vladr

你会经常遇到需要计算如此多行数据以至于性能受到影响吗？我同意有更好的解决方案，但在这种情况下，我不会过于担心O(n)。 - Samantha Branham

Answer 4

我认为最好的方法可能是手动计数。这样做会更快，因为你可以在知道已经完成计数时停止（如果你的表格非常大，这种方法很有用）。

var rowid1 = 'parent_1';
var rowid2 = 'parent_2';

var rows = $("#"+rowid1).parent().find('tr');
var count = 0;

for (var i = 0; i < rows.size(); i++) {
    var el = rows.get(i);

    // Done counting
    if (el.id == rowid2) break;

    if (el.id != rowid1) {
        ++count;
    }
}

alert("There are " + count + " rows between");

- Christopher Nadeau

---

如果表格很大且parent_1在表格末尾，情况仍然不好！ - vladr

Answer 5

这里有些人给出了不错的答案，我已经开始写我的答案，所以我会将其添加作为额外信息。

$(document).ready(function() {
    n = 0;
    var x = new Array(0,0,0);

    $("table tr").each(function(i)
    {
        if($(this).hasClass("child"))
        {
            x[n] += 1;
        }
        else
        {
            n += 1;
        }
    });

    for(var y = 0; y < x.length; y++)
    {
        alert(x[y]);
    }
});

顺便提一下，我的程序不关心有多少个父元素，只要数组足够大就会继续计数。

- Ólafur Waage

Answer 6

假设parent_1和parent_2分别是起始行和结束行：

$("#parent_1").siblings().size() - 1

- qpingu

---

它们的顺序有什么关系吗？ - eyelidlessness