I have unknown number of divs with increasing ID's:

<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>

And I have another list:

<ul>
   <li id="target-1" class="target"><a href="#"> </a></li>
   <li id="target-2" class="target"><a href="#"> </a></li>
   <li id="target-3" class="target"><a href="#"> </a></li>
   <li id="target-4" class="target"><a href="#"> </a></li>
</ul>

Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:

<ul>
       <li id="target-1"><a href="#"><img src="someURL" /> </a></li>
       <li id="target-2"><a href="#"><img src="anotherURL" /> </a></li>
       <li id="target-3"><a href="#"><img src="anddifferentURL" /> </a></li>
       <li id="target-4"><a href="#"><img src="andthelastoneURL" /> </a></li>
</ul>

I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?

 $(document).ready(function(){
                $('.target').each(function(){
                var URL = jQuery(this).data('grab');
                });
            });

I have unknown number of divs with increasing ID's:

<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>

And I have another list:

<ul>
   <li id="target-1" class="target"><a href="#"> </a></li>
   <li id="target-2" class="target"><a href="#"> </a></li>
   <li id="target-3" class="target"><a href="#"> </a></li>
   <li id="target-4" class="target"><a href="#"> </a></li>
</ul>

Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:

<ul>
       <li id="target-1"><a href="#"><img src="someURL" /> </a></li>
       <li id="target-2"><a href="#"><img src="anotherURL" /> </a></li>
       <li id="target-3"><a href="#"><img src="anddifferentURL" /> </a></li>
       <li id="target-4"><a href="#"><img src="andthelastoneURL" /> </a></li>
</ul>

I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?

 $(document).ready(function(){
                $('.target').each(function(){
                var URL = jQuery(this).data('grab');
                });
            });

• javascript
• jquery
• append

2 Answers 2

$(document).ready(function(){
  $('.target').each(function(){
     var $this = $(this);
     var divID = "source-" + ($this.id()).split("-")[1];
     $("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
  });
});

You can use indices to select the right elements, if you add a class to your source elements (like .source):

 $(document).ready(function(){
                var targets = $( '.target' );
                $('.source').each(function(index, value){
                    $(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
                });
            });