jquery - Copy <img> from a <ul> to a <div> -

i want grab images <ul>.

<ul class="tslider">     <li>         <div class="user_img"><img src="01.png" /> </div>     </li>     <li>         <div class="user_img"><img src="02.png" /> </div>     </li>     <li>         <div class="user_img"><img src="03.jpg" /> </div>     </li> </ul> 

and put them in corresponding <div> class bx-pager-item.

<div class="bx-pager bx-default-pager">     <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a></div>     <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a></div>     <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="2" href="">3</a></div> </div> 

here result should like.

<div class="bx-pager bx-default-pager">     <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href=""><img src="01.png" /></a></div>     <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href=""><img src="02.png" /></a></div>     <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="2" href=""><img src="03.jpg" /></a></div> </div> 

i tried following, it's not working.

jquery('.tslider > li').each(function(){   var user_img = jquery(this).find('.user_img').html();   jquery('.bx-pager').each(function(){     jquery(this).find('.bx-pager-item > a').html(user_img);   });  }); 

to empty target <a> elements , move <img /> elements in, i'd suggest:

// getting reference <a> elements, , emptying // elements of current contents: var links = $('div.bx-pager.bx-default-pager a.bx-pager-link').empty(),  // getting reference <img> elements: images = $('ul.tslider div img');  // using append() method's anonymous function, // i: index of current element in collection, // el: current element-node (dom node, not jquery // object): links.append(function(i,el) {    // returning <img /> element same   // index in collection in order append   // current element:   return images.eq(i); }); 

var links = $('div.bx-pager.bx-default-pager a.bx-pager-link').empty(),    images = $('ul.tslider div img');    links.append(function(i, el) {    return images.eq(i);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul class="tslider">    <li>      <div class="user_img">        <img src="01.png" />      </div>    </li>    <li>      <div class="user_img">        <img src="02.png" />      </div>    </li>    <li>      <div class="user_img">        <img src="03.jpg" />      </div>    </li>  </ul>  <div class="bx-pager bx-default-pager">    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a>    </div>    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a>    </div>    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="2" href="">3</a>    </div>  </div>

js fiddle demo.

to append <img /> elements <a> elements, retaining existing contents, remove call empty() method:

var links = $('div.bx-pager.bx-default-pager a.bx-pager-link'),   images = $('ul.tslider div img');  links.append(function(i, el) {   return images.eq(i); }); 

var links = $('div.bx-pager.bx-default-pager a.bx-pager-link'),    images = $('ul.tslider div img');    links.append(function(i, el) {    return images.eq(i);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul class="tslider">    <li>      <div class="user_img">        <img src="01.png" />      </div>    </li>    <li>      <div class="user_img">        <img src="02.png" />      </div>    </li>    <li>      <div class="user_img">        <img src="03.jpg" />      </div>    </li>  </ul>  <div class="bx-pager bx-default-pager">    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a>    </div>    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a>    </div>    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="2" href="">3</a>    </div>  </div>

js fiddle demo.

and copy <img> elements target <a> elements, use clone() method:

var links = $('div.bx-pager.bx-default-pager a.bx-pager-link'),   images = $('ul.tslider div img');  links.append(function(i, el) {   // above, having found relevant <img />   // return clone append() method ,   // append clone, rather original <img />:   return images.eq(i).clone(true, true); }); 

var links = $('div.bx-pager.bx-default-pager a.bx-pager-link'),    images = $('ul.tslider div img');    links.append(function(i, el) {    return images.eq(i).clone(true, true);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul class="tslider">    <li>      <div class="user_img">        <img src="01.png" />      </div>    </li>    <li>      <div class="user_img">        <img src="02.png" />      </div>    </li>    <li>      <div class="user_img">        <img src="03.jpg" />      </div>    </li>  </ul>  <div class="bx-pager bx-default-pager">    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a>    </div>    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a>    </div>    <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="2" href="">3</a>    </div>  </div>

js fiddle demo.

references:

• append().
• clone().
• empty().
• eq().