Question

my html code is like below :

    <div id="FormMessages">
        <div id="user-info-message" class="error">
            <asp:Image ID="imgError1" CssClass="imgError" runat="server" ImageUrl="~/Images/Login/Exclamation.png"
                AlternateText="attention!" ToolTip="attention!" />
            <p>
                error 1 ...</p>
        </div>
        <div id="email-message" class="error">
            <asp:Image ID="imgError2" CssClass="imgError" runat="server" ImageUrl="~/Images/Login/Exclamation.png"
                AlternateText="attention!" ToolTip="attention!" />
            <p>
                error 2 ...</p>
        </div>
        <div id="mobile-message" class="error">
            <asp:Image ID="imgError3" CssClass="imgError" runat="server" ImageUrl="~/Images/Login/Exclamation.png"
                AlternateText="attention!" ToolTip="attention!" />
            <p>
                error 3 ...</p>
        </div>
        <div id="cards-message" class="error">
            <asp:Image ID="imgError4" CssClass="imgError" runat="server" ImageUrl="~/Images/Login/Exclamation.png"
                AlternateText="attention!" ToolTip="attention!" />
            <p>
                error 4 ...</p>
        </div>
        <div id="banks-message" class="error">
            <asp:Image ID="imgError5" CssClass="imgError" runat="server" ImageUrl="~/Images/Login/Exclamation.png"
                AlternateText="attention!" ToolTip="attention!" />
            <p>
                error 5 ...</p>
        </div>
    </div>

how can i get the #th html child (at this example -> div) of FormMessages (containing opening and closing tags of that div) with jquery?

for example i want the below html as output :

    <div id="mobile-message" class="error">
        <asp:Image ID="imgError3" CssClass="imgError" runat="server" ImageUrl="~/Images/Login/Exclamation.png"
            AlternateText="توجّه!" ToolTip="attention!" />
        <p>
            error 3 ...</p>
    </div>

thanks in advance

Answer 1

$("#FormMessages :nth-child(2)") –

selects the second child div of the FormMessages div, which in this case is the div with id email-message.

A jsfiddle example.

See the documentation for the :nth-child() Selector.

Edit

Here is how you can get the second child with the starting and the opening tag –

alert( $('<div>')
       .append($('#FormMessages :nth-child(2)').clone())
       .remove()
       .html());

jsfiddle example.