Question

我有一个与Jquery选择器相关的基本问题。

在我的HTML中有一个循环表。在某些情况下，我必须隐藏整个第一列。

我很好奇我是否应该使用Jquery的每个选择器

$('#tableID').find('tr').each(function(){

//Hide the first column

});

或者最好在第一列使用某些类名（例如＆＃34; first_col＆＃34;），它们仅用于选择器而不用于任何CSS样式并使用它

$('.first_col').hide();

我从未使用过CSS选择器，只是为了选择元素而不是CSS样式。这是一个很好的方法，或者它有缺点，因为我认为它会混合脚本和CSS逻辑的分离。

请分享您的观点。

Answer 1

首先，.each()是一种方法 - 它做了一些事情。 $('.first-col')是一个选择器 - 它只选择你要做某事的元素（使用方法）。 可能你知道这一点并写得很有趣，但万一它是一个有用的提醒

如果您不需要逐个遍历集合，请不要这样做。因此，如果您可以在一个选择器中选择所有必需元素，那么就这样做。在这种情况下，您可以编写一个将获取的选择器字符串：

- 1st col of every row
- EXCEPT the first one
* and then do something (hide) them all

试试这个：

$('table tr td:first-of-type').hide(); //hides first col of every row

＆＃13;

$('table tr:not(:first-of-type) td:first-of-type').css('background','yellow');

＆＃13;

table{border-collapse:collapse;}
td{padding:8px;border:1px solid #ccc;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr>
</table>

＆＃13;

上面的代码说：

- select the table
- select every row: except the first one
- select every td: just the first one
- apply this css

注意：

请记住，jQuery使用CSS选择器来选择元素。你越了解CSS，你就越了解jQuery。你越了解jQuery选择器，你就越了解CSS。 这是一个伟大的世界，不是吗？

Answer 2

我有两种编码here的方法演示。查看console并查看差异。在我看来，我们应该使用selector代替find和each，因为find和each的效果比selector慢约3-4倍}。

Jquery每个选择器vs类选择器

2 个答案: