Question

I want to make id=”a” element div to be the second div in the div.b element.
And I want to how to make id=”a” element div to be the last div in the div.b element.

Here is the code:

<div class='b'>
    <div>a</div>
    <div>a</div>
    <div id="a">I want to moderate this div </div>
    <div>a</div>
</div>

The result I want to achieve is:

<div class='b'>
    <div>a</div>
    <div id="a">I want to moderate this div</div>
    <div>a</div>
    <div>a</div>
</div>

And:

<div class='b'>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div id="a">I want to moderate this div</div>
</div>

Answer 1

The after function will insert content after what’s selected.

$("div.b div:first").after($("#a"));

This selects the first div under your <div class="b", then inserts your <div id="a" after that, thereby making a the second div under b.

To make a be the last div under b, you’d find the currently last div under b, and insert a after that

$("div.b div:last").after($("#a"));

To make a first, you’d use the before function:

$("div.b div:first").before($("#a"));

Finally, per mu’s good comment, I’ll mention the eq function, which would allow you to select a child div of any index

$("div.b div:eq(2)").after($("#a"));

So now a would be third.