jquery - 使用 jQuery 隐藏 div 标签内的 tr 标签

Question

编辑

我正在编辑此内容，因为看来许多人都关注 html 格式而不是问题。抱歉

是的，当然 div 标签位于表格内，是的，当然，一旦加载 DOM，就会调用 jquery 中隐藏标签的方法

<小时/>

Jquery如下；

$(document).ready(function() {

    //naturally there is more in this file but this is all that happens to this tag
   $("#assessmentStatusReason").children().hide();
}

HTML如下；

<table>

        <tr><td class="fieldLabelBold"><label>CRN:</label></td>
        <td class="fieldText" id="uxCRN"></td></tr>

        <tr><td class="fieldLabelBold">
                <label>
                    Jobseeker Id:</label>
            </td>
            <td class="fieldText" id="uxJobseekerId">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Name:</label>
            </td>
            <td class="fieldText" id="uxName">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Date Of Birth:</label>
            </td>
            <td class="fieldText" id="uxDateOfBirth">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Gender:</label>
            </td>
            <td class="fieldText" id="uxGender">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Phone:</label>
            </td>
            <td class="fieldText" id="uxPhone">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Mobile:</label>
            </td>
            <td class="fieldText" id="uxMobile">
            </td>
        </tr>

        <div>
        <h3>Addresses</h3>
        </div>

        <tr>
            <td class="fieldLabelBold">
                <label>
                    Residential Address:</label>
            </td>
            <td class="fieldText" id="uxResidentialAddress">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Postal Address:</label>
            </td>
            <td class="fieldText" id="uxPostalAddress">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Interpreter Required:</label>
            </td>
            <td class="fieldText" id="uxInterpreterRequired">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Language:</label>
            </td>
            <td class="fieldText" id="uxLanguage">
            </td>
        </tr>

        <tr>
            <td class="fieldLabelBold ">
                <label>
                    Assessment Status:</label>
            </td>
            <td width="300px">                
                !{Html.DropDownList("assessmentDecision", Model.ReferralStatus, new { id = "uxassessmentDecision" })}
            </td>
        </tr>
        <div id="assessmentStatusReason">
        <tr id="uxNoShowDate">
            <td class="fieldLabelBold"><label>No Show Date:</label></td>
            <td>!{Html.DatePicker("uxNoShowDate", null, true, "100px")}</td>
        </tr>        

        <tr id="uxReferralDeclinedReasonCode" >
            <td class="fieldLabelBold"><label>Declined Reason:</label></td>
            <td>!{Html.DropDownList("DeclinedReason", Model.ReferralDeclinedReasonCode, new { id = "uxDeclineReasonCode" })}</td>
        </tr>       
        </div>
        </table>

嗨，

这是基本问题，我已经看过有关此类问题的其他帖子，但奇怪的是答案似乎不起作用。

我有一个 div 标签

<div id="assessmentStatusReason">
        <tr>
            <td class="fieldLabelBold"><label>Reason:</label></td>
            <td class="fieldText" id="uxLanguage"><input id="reasonInput2" /></td>
        </tr>
        </div>

以及加载我运行的 jquery

$("#assessmentStatusReason").children().hide();

但是 tr td 和输入在加载时仍然可见

有什么想法吗？

Answer 1

我建议将您的 assessmentStatusReason 设为一个类而不是 ID，这样您就可以隐藏多行。

<tr class="assessmentStatusReason">
 <td class="fieldLabelBold"><label>Reason:</label></td>
 <td class="fieldText"><input id="reasonInput1" /></td>
</tr>
<tr class="assessmentStatusReason">
 <td class="fieldLabelBold"><label>Reason:</label></td>
 <td class="fieldText"><input id="reasonInput2" /></td>
</tr>

然后使用这个脚本:

$(document).ready(function() {
    $(".assessmentStatusReason").hide();
});