如何在知道其类的 JavaScript 中获取表列索引？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5910753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a table column index in JavaScript knowing its class?
提问by Federico Bellucci
I want to hide/show table columns
我想隐藏/显示表格列
- using classes on columns,
- without adding classes to each
<td>
- 在列上使用类，
- 无需为每个添加类
<td>
Table sample:
表示例：
<table id="huge-table" border="1">
<caption>A huge table</caption>
<colgroup>
<col class="table-0">
<col class="table-0">
<col class="table-1">
<col class="table-1">
</colgroup>
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
</tbody>
</table>
Unfortunately $(".table-1").hide()doesn't work.
不幸的是$(".table-1").hide()不起作用。
So I would like to get columns indexes by class and to use them with the nth-childselector:
所以我想按类获取列索引并将它们与nth-child选择器一起使用：
indexes = getColumnIndexesByClass("table-1");
for ( var i=0; i<indexes.length; i++ ) {
$('#huge-table td:nth-child(indexes[i])').hide();
}
How can I implement the getColumnIndexesByClassfunction or any other equivalent solution?
如何实现该getColumnIndexesByClass功能或任何其他等效解决方案？
EDIT
编辑
The table size is not known. I know only the classes.
桌子大小未知。我只知道课程。
回答by Raynos
function getColumnIndexesByClass(class) {
return $("." + class).map(function() {
return $(this).index();
}).get();
}
This function returns an array of numbers. I.e.
此函数返回一个数字数组。IE
getColumnIndexesByClass("table-1") === [2,3]
getColumnIndexesByClass("table-1") === [2,3]
$.each(getColumnIndexesByClass("page-1"), function(key, val) {
$("#hugetable td").filter(function() {
return $(this).index() === val;
}).hide();
});
The above will get all your tds and filter them to only tds in a particular index. Then hide those.
以上将获取您所有的 tds 并将它们过滤为仅在特定索引中的 tds。然后隐藏那些。
You may want to do more caching / optimisation.
您可能想要做更多的缓存/优化。
回答by Mottie
Try this (using a slightly modified version of Raynos' function) and check out the demo:
试试这个（使用稍微修改过的 Raynos 函数版本）并查看演示：
function getColumnIndexesByClass(class) {
return $("." + class).map(function() {
return $(this).index() + 1; // add one because nth-child is not zero based
}).get();
}
var indexes = getColumnIndexesByClass('table-1'),
table = $('#huge-table');
for ( var i=0; i<indexes.length; i++ ) {
table.find('td:nth-child(' + indexes[i] + '), th:nth-child(' + indexes[i] + ')').hide();
}
回答by naktinis
In jQuery you can use $('.table-0').index()to find the position of the firstmatched element in relation to its siblings.
在 jQuery 中，您可以使用$('.table-0').index()来查找第一个匹配元素相对于其兄弟元素的位置。
The full example would be:
完整的例子是：
var classname = 'table-0';
var indices = $('.'+classname).map(function() {return $(this).index()+1}).get();
$.each(indices, function(iter, val) {
$('td:nth-child('+val+'), th:nth-child('+val+')', '#huge-table').hide();
});
This also hides the headers. Note that in :nth-childcount starts from 1. You could also have this in a single line, but it would look more ugly. You may also want to define a function for selecting indexes, but currently the code is only 3-5 lines long (given that you already have the class name) and is quite readable.
这也隐藏了标题。请注意，:nth-child计数从 1 开始。您也可以将它放在一行中，但它看起来更难看。您可能还想定义一个选择索引的函数，但目前代码只有 3-5 行（假设您已经有了类名）并且非常易读。
Read here for details about the indexmethod: http://api.jquery.com/index
在这里阅读有关该index方法的详细信息：http: //api.jquery.com/index
Edited:selects multiple columns with the same class, uses context.
编辑：选择具有相同类的多个列，使用上下文。
