I have these code
<div class="images">
<img src="image1.jpg" alt="" class="image1">
<img src="image2.jpg" alt="" class="image2">
<img src="image3.jpg" alt="" class="image3">
</div>
and
<ul id="attnd" class="class-attnd">
<li class="liclass">some text1</li>
<li class="liclass">some text2</li>
<li class="liclass">some text3</li>
</ul>
in result I want all images from images div move into li element accordingly its index means first image into first li and second into second li and so on
like this
<ul id="attnd" class="class-attnd">
<li class="liclass liclass-1">
<img src="image1.jpg" alt="" class="image1">
<span class="spanclass-1">some text1</span>
</li>
<li class="liclass liclass-2">
<img src="image2.jpg" alt="" class="image2">
<span class="spanclass-2">some text2</span>
</li>
<li class="liclass liclass-3">
<img src="image3.jpg" alt="" class="image3">
<span class="spanclass-3">some text3</span>
</li>
</ul>
How can I achieve this using jquery
2
Answers
When you
appendChild
an element it is detached from its current parent to the new location. So using a loop I am moving everyimg
to its same indexli
usingli.appendChild(image)
. The order is guaranteed to be the same by JavaScript specs.Here is a jQuery solution: it iterates the
li
elements, and for each of them moves the next image into it, and wraps its text content into aspan
element: