Search jQuery

jQuery Forum

Working with multiple same elements jQuery

in Using jQuery • 10 years ago

I don't know if the title describes the problem correctly so the problem is as follows. If I have multiple elements with same classes or the elements are same like:

<a href="Link"><img class="slider_image" src="url"></a>
<a href="Link"><img class="slider_image" src="url"></a>
<a href="Link"><img class="slider_image" src="url"></a>
<a href="Link"><img class="slider_image" src="url"></a>

These are slider images. What I want to do is get the the link of image and attribute both differently and I want to use them elsewhere, maybe in a different way, like I want the images to point to the same <a>attribute but I want to use them in a different slider.

I've tried as far as I could, I can use the images in a different way, but I'm not able to grab the hrefattribute of a and use them on the same images they are pointing to like in the above example.

Is there a way I can do it?

Replies(9)

jay.blanc..

Re: Working with multiple same elements jQuery

10 years ago

Your question is not quite clear, but I think you're looking for something like eq() - http://api.jquery.com/eq/

alidarakh..

Re: Working with multiple same elements jQuery

10 years ago

OK. I want to use the same as above but every image will be used in a different place. Look at it like an array image 1 and link 1 will be used in the first box img 2 and link 2 in the second box etc. But the problem is I'm not able able to work the link it either gives an error or nothing at all

jay.blanc..

Re: Working with multiple same elements jQuery

10 years ago

Can you show us your jQuery code? Or perhaps setup a jsfiddle so we can help you to solve.

alidarakh..

Re: Working with multiple same elements jQuery

10 years ago

$('.single_slide').each(function() {

var img = $(this).children('img');

var imgs = img.attr('src');

console.log(imgs);

});

This is a sample of what I am doing. I want the source of every image and the link of every <a> element in a different variable or an array

dsvick

Re: Working with multiple same elements jQuery

10 years ago

What are the single_slide elements? Do they enclose each link/image combination you posted above?

The problem with the code you posted above is that children returns a jQuery object but you're tying to use it like a single element. Like Jay suggested, you can use eq to reduce the set to a single element, like this:

var img = $(this).children('img').eq(0);

Assuming there is only one img contained within the single_slide element, that will give it to you. You can even simplify it more like this:

var imgSrc = $(this).children('img').eq(0).attr("src");

Then you can do something similar with the href of the a element as well.

Dave

jay.blanc..

Re: Working with multiple same elements jQuery

10 years ago

Like this? http://jsfiddle.net/j82P2/

alidarakh..

Re: Working with multiple same elements jQuery

10 years ago

Yes they do the code is this :

<div class='single_slide'>
	<h3>Macbook Air</h3>
	<p><a href="http://citizencomputers.byethost5.com/shop/macbook-air-md223za/"><img class="aligncenter size-full wp-image-213" alt="Macbook Air" src="http://citizencomputers.byethost5.com/wp-content/uploads/2013/04/Macbook-Air.jpg" width="930" height="380" /></a></p>
	</div>
	</p>
	<p style="text-align: center;">
	<div class='single_slide'>
	<h3>Computing Kit DCCP847DYE</h3>
	<p><a href="http://citizencomputers.byethost5.com/shop/computing-kit/"><img class="aligncenter size-full wp-image-216" alt="computing" src="http://citizencomputers.byethost5.com/wp-content/uploads/2013/04/computing.jpg" width="930" height="380" /></a></p>
	</div>
	</p>





	<p style="text-align: center;">
	<div class='single_slide'>
	<h3>HP Envy X2</h3>
	<p><a href="http://citizencomputers.byethost5.com/shop/hp-envy-x2/"><img class="aligncenter size-full wp-image-209" alt="Envy x2" src="http://citizencomputers.byethost5.com/wp-content/uploads/2013/04/Envy-x2.jpg" width="930" height="380" /></a></p>
	</div>
	</p>





	<p style="text-align: center;">
	<div class='single_slide'>
	<h3>Acer Iconia W7</h3>
	<p><a href="http://citizencomputers.byethost5.com/shop/acer-iconia-w7/"><img class="aligncenter size-full wp-image-206" alt="Acer" src="http://citizencomputers.byethost5.com/wp-content/uploads/2013/04/Acer.jpg" width="930" height="380" /></a></p>
	</div>
	</p>
	<p style="text-align: center;">
	<div class='single_slide'>
	<h3>iMac MC872</h3>
	<p><a href="http://citizencomputers.byethost5.com/shop/imac-mc812/"><img class="aligncenter size-full wp-image-203" alt="iMac" src="http://citizencomputers.byethost5.com/wp-content/uploads/2013/04/iMac.jpg" width="930" height="380" /></a></p>
	</div>