jQuery-显示div和所有子标签元素

Question

My HTML:

<div id="summarySpan" style="padding-left: 20px" hidden>
    <label id="currentStatusSummary" style="padding-left: 20px" />
    <br />
    <label id="currentMonitoringSummary" style="padding-left: 20px" />
</div>

Javascript code:

$("#currentStatusSummary").text(returnedData.CurrentStatusSummary);
$("#currentMonitoringSummary").text(returnedData.CurrentMonitoringSummary);
$("#summarySpan").show().children().show();

For a reason I am unfamiliar with, only the first label (with ID currentStatusSummary) is shown when the JS code executes.

Can someone please explain the reason for this and help me resolve it?

Answer 1

First, hidden is an invalid attribute. Secondly, you should probably close your label tags. Finally, you only need to hide and show the parent element (if the container is hidden, its content is too).

<div id="summarySpan" style="padding-left: 20px; display: none;">
    <label id="currentStatusSummary" style="padding-left: 20px"></label>
    <br />
    <label id="currentMonitoringSummary" style="padding-left: 20px"></label>
</div>

$("#currentStatusSummary").text(returnedData.CurrentStatusSummary);
$("#currentMonitoringSummary").text(returnedData.CurrentMonitoringSummary);
$("#summarySpan").show();