如果 td 段落有类，则隐藏 tr 类

Question

如果<td>包含的段落具有特定类，我需要隐藏（ display:none; ）整个<tr> 。

例子：

<table>
    <tbody>
        <tr id="sample-34457" class="row-class">
            <td class="cell-class"></td>
            <td class="cell-class"></td>
            <td class="cell-class">
                <p class="hide-tr-if-class"></p>
            </td>
        </tr>
    </tbody>
</table>

我尝试了一些使用 CSS 的方法，但它不能 100% 地工作。

我尝试过的一些 jQuery：

if ($("p").hasClass(".hide-tr-if-class") ) {
    $("tr#sample-*").hide();

    ///// OR

    $(".row-class").css("display"`, "none");

};

两种尝试都没有真正的运气。 我的目标是使用 display:none 隐藏整个表格行，如果段落有类。 如果满足条件，这将最终从列表中删除项目。

谢谢。

Answer 1

使用closest获取p元素的tr祖先，然后像这样隐藏它：

$("p.hide-tr-if-class")  // select the 'p' elements with the class 'hide-tr-if-class', the 'if' statement is not needed here
  .closest("tr")         // get their closest 'tr' ancestors
  .hide();               // hide them, this is equivalent to '.css( "display", "none" )' but shorter and clearer

注意：如果行是动态添加的，那么上面的代码需要在生成代码完成后执行。

Answer 2

首先，如果您使用hasClass ，则参数将不需要.

此外，使用closest选择最近的父级（此处为tr ）

 if ($('p').hasClass('hide-tr-if-class')) { console.log('in here') $('p.hide-tr-if-class').closest('tr').css('visibility', 'hidden'); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr id="sample-34457" class="row-class"> <td class="cell-class">a</td> <td class="cell-class">b</td> <td class="cell-class"> <p class="hide-tr-if-class">c</p> </td> </tr> <tr id="sample-34457" class="row-class"> <td class="cell-class">d</td> <td class="cell-class">e</td> <td class="cell-class"> <p class>f</p> </td> </tr> </tbody> </table>

Answer 3

尝试这个：

if ($("p").hasClass(".hide-tr-if-class") ) {
   $(this).closest('tr').hide();
{