表td中的jquery选择器

Question

下面是我的html代码wordpress，它在我的插件破折号页中创建了一个表：

<table class="wp-list-table widefat fixed exams">

    <thead></thead>
    <tfoot></tfoot>
    <tbody id="the-list" data-wp-lists="list:exam">
        <tr class="alternate">
            <th class="check-column" scope="row">
                <input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
            </th>
            <td class="ID column-ID"></td>
            <td class="exam_name column-exam_name">

                this text is to be selected

                <span style="color:red"></span>
                <div class="row-actions">
                    <span class="subjects"></span>
                    <span class="settings"></span>
                    <span class="clone"></span>
                    <span class="users"></span>
                    <span class="uploads"></span>
                </div>
            </td>
            <td class="total_user column-total_user"></td>
            <td class="date_create column-date_create"></td>
            <td class="short_code column-short_code"></td>
        </tr>
        <tr></tr>
        <tr class="alternate"></tr>
        <tr></tr>
        <tr class="alternate"></tr>
        <tr></tr>
        <tr class="alternate"></tr>
    </tbody>

</table>

在我的jquery代码中，我想选择，只在td中选择：

$(".exam_cb").click(function() {

            $(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
            $(this).parent("th").next("td").next("td").text().hide(); // not working
            $(this).parent("th").next("td").next("td").html().hide(); // not working
            $(this).parent("th").next("td").next("td").val().hide(); // not working
     });

我做错什么事了？

Answer 1

您需要通过nodeType过滤文本节点来选择它们。然后用css将dom元素中的内容包装为none：

$(this).parent().siblings('.exam_name').contents().filter(function() {
    return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,

工作演示

Answer 2

不能在text()上应用隐藏--将其应用于HTML元素

$(this).parent("th").next("td").next("td").hide();

这会导致JS错误，因此在此之后您的其他语句都无法工作。

和the same is true for val().hide() - A JS Error will be thrown

​

$(".exam_cb").click(function() {
   
    var columnmTo=$(this).parent("th").next("td").next("td");
  
    columnmTo.find('.selectedTest').addClass('highlight');
         
    columnmTo.find('.error').hide();
    
    columnmTo.find('.row-actions').hide();
 });

span.highlight
{
font-weight:bold;
}

span.error
{
font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="wp-list-table widefat fixed exams">

    <thead></thead>
    <tfoot></tfoot>
    <tbody id="the-list" data-wp-lists="list:exam">
        <tr class="alternate">
            <th class="check-column" scope="row">
                <input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
            </th>
            <td class="ID column-ID"></td>
            <td class="exam_name column-exam_name">

                <span class="selectedTest">this text is to be selected</span>

                <span class="error">Hello</span>
                <div class="row-actions">
                    <span class="subjects">a</span>
                    <span class="settings">b</span>
                    <span class="clone">c</span>
                    <span class="users">c</span>
                    <span class="uploads">d</span>
                </div>
            </td>
            <td class="total_user column-total_user"></td>
            <td class="date_create column-date_create"></td>
            <td class="short_code column-short_code"></td>
        </tr>
        <tr></tr>
        <tr class="alternate"></tr>
        <tr></tr>
        <tr class="alternate"></tr>
        <tr></tr>
        <tr class="alternate"></tr>
    </tbody>

</table>

​