0

如果我有两个这样的 html 表：

<table id="myTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Difference</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20.9%</td>
      <td>+12.1</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>+12</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
  </tbody>
</table>
<br/><br/>
<table id="anotherTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>High Score</th>
      <th>Total Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>180</td>
    </tr>
  </tbody>
</table>

我的 HTML 页面上的 jQuery：

$(document).ready(function(){
  $("#myTable").myplugin();
});

我正在创建一个 jQuery 插件，我希望能够使用 $("table").myplugin() 或 $("#myTable").myplugin() 将其应用于我的应用程序页面上的任何或所有 HTML 表.

在我的插件代码中：

return this.each(function(index){
    // code here
});

如果我添加该行$(this).addClass('myClass')，则 CSS“myClass”将添加到表“myTable”中，但如果我添加$('thead').addClass()“myClass”行，则会将其添加到两个主题中。我试过$(this thead).addClass(), $(this 'thead').addClass(), $('this thead').addClass()了，但都抛出了一个 JS 错误。在这种情况下，如何使用“this”来仅选择元素“myplugin”中的thead被应用于“myTable”？

4

2 回答 2

1

您可以使用.find方法[jQuery docs]。

$(this).find("thead").addClass();

如果您确定它thead是 的直接子代this，则可以.children改用它，它会更快，尤其是在您有非常大的表的情况下。

$(this).children("thead").addClass();

您还可以设置this为查询的上下文：

$("thead", this).addClass();
于 2012-10-04T01:41:12.150 回答
0

试试： $(this).find("thead").addClass("myClass");

于 2012-10-04T01:42:43.197 回答