CODEWITHSUNDEEP
javascriptjqueryhtmleach
Paul
Paul

Reputation: 633

jQuery .each() function to modify DOM

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>

Upvotes: 0

Views: 180

Answers (6)

Fabrizio Regini
Fabrizio Regini

Reputation: 1500

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/

Upvotes: 0

mark
mark

Reputation: 183

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);

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

I would add a ul element inside #left and I would add the image lis 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>

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074238

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>

Upvotes: 2

Edward Manda
Edward Manda

Reputation: 579

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);

});

Upvotes: 0

Related Questions