jQuery .each() function to modify DOM

Question

With the jQuery.each function I'm trying to get all of the ".jpg" related url's of a certain div. What I want to accomplish is to find each A element containing such url and insert the following HTML in it: <li><img src="imgSrc"/></li>

    $('#right a[href*=".jpg"]').each(function(index){  
        var imgSrc = $(this).attr('href');
        console.log(imgSrc);
    });

this above example is all I've got right now, I've tried things like:

$('#destination img').attr('src', imgSrc);

To maybe make some things more clear the example below wil make things more clear.

<div id="left">     
   /* 
    Get the Urls of the a's in #right 
    and put them inside this div wrapped in an img tag: <img src="URL"/>
  */
</div>
<div id="right">
  <a href="http://example.com/images/example1.jpg"></a>
  <a href="http://example.com/images/example2.jpg"></a>
</div>

Answer 1

I'm guessing you mean you want to end up with:

<li><a href="http://example.com/images/example1.jpg"><img src="http://example.com/images/example1.jpg"></a></li>

...which isn't quite literally wrapping the links in that structure.

You can do that with wrap , but it's an invalid structure — div can't have li as direct children. The only valid containers for li are ul , ol , and template .

You'd do it like this:

var $left = $("#left");
$('#right a[href*=".jpg"]').each(function() {
    $left.append('<li><img src="' + this.href + '"></li>');
});

You'll still have to deal with the li thing. :-)

Here's an example where #left is a ul rather than a div :

 var $left = $("#left"); $('#right a[href*=".jpg"]').each(function() { $left.append('<li><img src="' + this.href + '"></li>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="left"> </ul> <div id="right"> <a href="http://example.com/images/example1.jpg"></a> <a href="http://example.com/images/example2.jpg"></a> </div> 

Answer 2

Just add the url result with the html tag like:

    $('#right a[href*=".jpg"]').each(function(index){  

    var imgSrc = $(this).attr('href');
    var url = '<li><img src="' + imgSrc + '"/></li>';

    console.log(url);

});

Answer 3

I would add a ul element inside #left and I would add the image li s into this element as follows:

$(function() {
    var ul = $('<ul/>'),
        li = $('<li/>'),
        img = $('<img/>');
    $('#right a[href$=jpg]').each(function() {
        ul.append( li.clone().html( $(this).clone().html( img.clone().attr('src', this.href) ) ) );
    });
    $('#left').html( ul );
});

 $(function() { var ul = $('<ul/>'), li = $('<li/>'), img = $('<img/>'); $('#right a[href$=jpg]').each(function() { ul.append( li.clone().html( $(this).clone().html( img.clone().attr('src', this.href) ) ) ); }); $('#left').html( ul ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="left"> /* Get the Urls of the a's in #right and put them inside this div wrapped in an img tag: <img src="URL"/> */ </div> <div id="right"> <a href="http://example.com/images/example1.jpg"></a> <a href="http://example.com/images/example2.jpg"></a> </div> 

Answer 4

You can do something like this:

$(document).ready( function(){
    $("#right a[href*='.jpg']").each( function(){
        $("#left").append("<li><img src='" + this.href + "'></li>");       
    });    
});

Check it out here: JSFiddle

Answer 5

I would personally make a string then add that to a div somewhere. Here is an example.

var list = '<ul>';

$('#right a[href*=".jpg"]').each(function(index){  
    list += '<li><img src="' + this.href +'" /></li>'
});

list += '</ul>';

$('#destination').html(list);

Answer 6

The best way to do that is to use the $ selector to match all attributes ending with that string.

 $('#right a[href$=".jpg"]').each(function (index) {
   $('#left').append($('<li/>').append($('<img/>').attr('src', $(this).attr('href'))));
 });

Here is a fildde with a working example:

http://jsfiddle.net/Lq1u2v7n/1/