javascript - Jquery 每个选择器与类选择器

Question

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

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

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

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

//Hide the first column

});

或者最好在第一列使用一些类名(例如“first_col”)这将仅用于选择器而不用于任何 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

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

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

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

上面的代码说:

- 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。 这是一个伟大的世界，不是吗？