Question

如果我有两个这样的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插件，我希望能够应用于我的应用程序页面上的任何或所有HTML表格，使用$（“table”）。myplugin（）或$（“＃myTable”）。为myplugin（）。

在我的插件代码中：

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

如果我添加行$(this).addClass('myClass') CSS“myClass”被添加到表“myTable”但是如果我添加行$('thead').addClass()“myClass”被添加到两个theads中。我试过$(this thead).addClass(), $(this 'thead').addClass(), $('this thead').addClass()但是全都抛出了JS错误。我如何利用“this”来选择元素中的thead“myplugin”在这种情况下应用于“myTable”？

Answer 1

您可以使用.find method^{[jQuery docs]}。

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

如果您确定thead是this的直接孩子，则可以使用.children代替它，它会更快，尤其是如果您有非常大的表格。

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

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

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

Answer 2

尝试： $（本）.find（ “THEAD”）addClass（ “MyClass的”）;

jQuery插件选择带有“this”元素的thead

2 个答案: