jquery - jQuery プラグインは、「this」要素で広告を選択します

Question

次のような 2 つの 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();
});

$("table").myplugin() または $("#myTable").myplugin() を使用して、アプリケーションのページ上の任意またはすべての HTML テーブルに適用できる jQuery プラグインを作成しています。 .

私のプラグインコードで：

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」を使用して、この場合「myTable」に適用されている要素「myplugin」のスレッドのみを選択するにはどうすればよいですか?

Answer 1

.findメソッド^[jQuerydocs]を使用できます。

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

theadの直接の子であることが確実な場合は、代わりにthis使用できます.children。特にテーブルが非常に大きい場合は、より高速になります。

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

thisクエリのコンテキストとして設定することもできます。

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

Answer 2

試してください：$（this）.find（ "thead"）。addClass（ "myClass"）;