遍歷表行（tr）並選擇JQuery中沒有特定類的行

Question

我正在嘗試做的是，能夠選擇沒有特定類名的行，並將其推入新數組。 我知道有:not() Selector和.not() method可以幫助我。

但是最大的問題是我不能將:not() Selector與$(this)使用，並嘗試使用.not() method但無法到達任何地方。

這是我的代碼：

 $(document).ready(function(){ $('#getRows').on('click', function() { var temp = new Array(); $('#tbl tr').each(function(){ var clsFree = $(this).not(document.getElementsByClassName("testCls")); temp.push(clsFree); }); console.log(temp.length); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="getRows">Get rows without class</button> <table id="tbl"> <tr class="testCls"><td>Test1</td></tr> <tr class="testCls"><td>Test2</td></tr> <tr><td>Test3</td></tr> <tr class="testCls"><td>Test4</td></tr> <tr class="testCls"><td>Test5</td></tr> <tr class="testCls"><td>Test6</td></tr> <tr><td>Test7</td></tr> <tr class="testCls"><td>Test8</td></tr> <tr class="testCls"><td>Test9</td></tr> </table> 

請注意，這里的主要目標是使用testCls查找沒有類名的testCls ，並將其推入新數組。 任何其他方法也是可以理解的。

Answer 1

嘗試:not()作為.each迭代器中選擇器的一部分，以僅使用選擇器中的選定行進行迭代：

$('#tbl tr:not(.testCls)').each(function(){

工作代碼段：

 $(document).ready(function(){ $('#getRows').on('click', function() { var temp = new Array(); $('#tbl tr:not(.testCls)').each(function(){ var clsFree = this; temp.push(clsFree); }); console.log(temp.length); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="getRows">Get rows without class</button> <table id="tbl"> <tr class="testCls"><td>Test1</td></tr> <tr class="testCls"><td>Test2</td></tr> <tr><td>Test3</td></tr> <tr class="testCls"><td>Test4</td></tr> <tr class="testCls"><td>Test5</td></tr> <tr class="testCls"><td>Test6</td></tr> <tr><td>Test7</td></tr> <tr class="testCls"><td>Test8</td></tr> <tr class="testCls"><td>Test9</td></tr> </table> 

Answer 2

兩件事情：

• 這是$(this).not('.testCls');的語法： $(this).not('.testCls');
• clsFree將是一個jQuery，即使其中沒​​有元素，jQuery仍然存在。 您必須檢查長度以查看是否有任何元素。

$('#tbl tr:not(.testCls)').each... ，您可能最終會更喜歡以下內容： $('#tbl tr:not(.testCls)').each...

 $(document).ready(function() { $('#getRows').on('click', function() { var temp = new Array(); $('#tbl tr').each(function() { clsFree = $(this).not('.testCls'); if (clsFree.length > 0) temp.push(clsFree); }); console.log(temp.length); }); console.log('other method', $('#tbl tr:not(.testCls)').length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="getRows">Get rows without class</button> <table id="tbl"> <tr class="testCls"><td>Test1</td></tr> <tr class="testCls"><td>Test2</td></tr> <tr><td>Test3</td></tr> <tr class="testCls"><td>Test4</td></tr> <tr class="testCls"><td>Test5</td></tr> <tr class="testCls"><td>Test6</td></tr> <tr><td>Test7</td></tr> <tr class="testCls"><td>Test8</td></tr> <tr class="testCls"<td>Test9</tr></tr> </table>