skip to Main Content

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


  1. When you appendChild an element it is detached from its current parent to the new location. So using a loop I am moving every img to its same index li using li.appendChild(image). The order is guaranteed to be the same by JavaScript specs.

    var images = document.querySelectorAll(".images img")
    var lis = document.querySelectorAll(".class-attnd li")
    
    for (var i = 0; i < images.length; i++) {
      var image = images[i]
      var li = lis[i]
      var text = li.innerText
      li.innerHTML = ''
    
      var span = document.createElement("span")
      span.innerText = text;
      li.appendChild(image)
      li.appendChild(span)
    
      li.classList.add("liclass-" + (i + 1))
      span.classList.add("spanclass-" + (i + 1))
    
    
    }
    <div class="images">
      <img src="https://picsum.photos/50/?id=1" alt="" class="image1">
      <img src="https://picsum.photos/50/?id=2" alt="" class="image2">
      <img src="https://picsum.photos/50/?id=3" alt="" class="image2">
    </div>
    
    
    <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>
    Login or Signup to reply.
  2. 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 a span element:

    $("#attnd li").each(function (idx, li) {
        $(li).addClass("liclass-" + (idx+1)).append(
            $(".images img:first-child"),
            $("<span>").addClass("spanclass-" + (idx+1)).append($(li).contents())
        );
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div class="images">
        <img src="image1.jpg" alt="img1" class="image1">
        <img src="image2.jpg" alt="img2" class="image2">
        <img src="image3.jpg" alt="img3" class="image3">
    </div>
    
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search