CODEWITHSUNDEEP
jqueryattributes
Morteza
Morteza

Reputation: 2153

jQquery : add specific attr to each image

There is a loop (in my gallery script) that result me something like this :

        <div class="gallery">
            <a href="uploads/rep2.png">
             <img src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep1.png">
             <img src="uploads/rep1-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep2.png">
             <img src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>

I want add specific attr (that is "href" of each link) to each image in this loop. Must be:

        <div class="gallery">
            <a href="uploads/rep2.png">
             <img data-img="uploads/rep2.png" src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep1.png">
             <img data-img="uploads/rep1.png" src="uploads/rep1-150x110.png" class="thumbnail">
            </a>
        </div>
        <div class="gallery">
            <a href="uploads/rep2.png">
             <img data-img="uploads/rep2.png" src="uploads/rep2-150x110.png" class="thumbnail">
            </a>
        </div>

I wrote this code:

$('.thumbnail').each(function() {
var $this = $('.gallery a'),
href = $this.data('href'); 
$('.thumbnail').attr('data-img', href);
        });

But not work.Thanks for any help.

Upvotes: 2

Views: 134

Answers (5)

yoozer8
yoozer8

Reputation: 7489

var $this = $('.gallery a');

is returning an array (all of the a elements that are withing a .gallery). Try the following:

$('.gallery img').each(function(){
    $(this).attr('data-img', $(this).parent().attr('href'));
});

This will go to each img and give it a data-img attribute with a value of its containing a's href.

EDIT: As pointed out in the below comment, you probably only want the images in the gallery divs, so you should use the selector $('.gallery img') or $('.gallery .thumbnail') (if there are non-thumbnail images you want to skip).

Upvotes: 0

Hogan
Hogan

Reputation: 70523

Close but you need to use this in each callback.

First take all the a tags in gallery, find their href, apply that to the img tag which is a child.

$('.gallery a').each(function() {
   href = $(this).attr('href');
   $(this).find("img").attr('data-img', href);
});

The key trick here is that each() sets the this variable to the element iterated over for each callback.

Upvotes: 1

Dennis
Dennis

Reputation: 32598

Attr can take a function that will return the new value:

$('.thumbnail').attr("data-img", function() {
    return this.parentNode.getAttribute("href");
});

Upvotes: 0

Val
Val

Reputation: 17522

Give this a try,

$('.thumbnail').each(function(i,n) {
var $this = $(n).parent(),
href = $this.data('href'); 
$('.thumbnail').attr('data-img', href);
});

$('.gallery a') => this simply gets all the a tags, and you probably end up with the same href

Upvotes: 0

Abdul Munim
Abdul Munim

Reputation: 19217

Try this:

$(".gallery").each(function(index, value) {
    $("img", $(value)).attr("data-img", $("a", $(value)).attr("href"));
});

Upvotes: 0

Related Questions