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 display none：

将内容包装在dom元素中

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

<强> Working Demo

Answer 2

您无法对文字（）应用隐藏 - 您将其应用于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>

表td中的jquery选择器

2 个答案: