JQuery：Return TBODY html 除了没有 class=hidden 的行

Question

我有一个table例子如下：

<table>
 <thead>
   .....
 </thead>
 <tbody id="rptBody"> 
   <tr><td>Row 1</td></tr>
   <tr class="hidden"><td>Row 2</td></tr>
   <tr class="hidden"><td>Row 3</td></tr>
   <tr><td>Row 4</td></tr>
 </tbody>
</table>

我想将 $('#rptBody').html() 传递给另一个将打印所选行的函数（即 class <> 隐藏）。

我试过：

$('#rptBody tr:not(.hidden)').html()

但是 returns 只是第一个非隐藏行的列。如何过滤 tbody.html 以仅包含非隐藏行？

Answer 1

您应该使用 filter 然后克隆。由于过滤器具有较少的 load 然后克隆整个 html.

var matching = $('#rptBody tr').filter(function(){
                   return $(this).not('.hidden');
                });

alert(matching.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
 </thead>
 <tbody id="rptBody"> 
   <tr><td>Row 1</td></tr>
   <tr class="hidden"><td>Row 2</td></tr>
   <tr class="hidden"><td>Row 3</td></tr>
   <tr><td>Row 4</td></tr>
 </tbody>
</table>

Answer 2

我认为如果您想要 html（而不只是一组匹配的 dom 对象），您可能需要克隆原始对象。像这样

x=$('#rptBody').clone();
x.find('.hidden').remove();
alert(x.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
 </thead>
 <tbody id="rptBody"> 
   <tr><td>Row 1</td></tr>
   <tr class="hidden"><td>Row 2</td></tr>
   <tr class="hidden"><td>Row 3</td></tr>
   <tr><td>Row 4</td></tr>
 </tbody>
</table>

Answer 3

了解一下很重要，那你想做什么:)

$('#rptBody tr:not(.hidden)')

returns jQuery 对象数组。

Answer 4

$('#rptBody tr').each(function(){
    if ( $(this).hasClass('hidden') ) 
        {
            console.log( $(this).html() );
        }
    else 
        {
            console.log('Nope.');
        }
})

这将使您能够控制这两种情况:)。

JQuery：Return TBODY html 除了没有 class=hidden 的行

JQuery: Return TBODY html except for rows that don't have class=hidden

jquery

jquery-selectors