JQuery - Pass value of variable to index value of class

Question

I'm new to js and have only been learning for about a week so be kind. The script below alters the src of an iframe to match the custom data-attribute of the same iframe when a link with a class of .thumb is clicked.

This works fine but its currently changing the iframe src of all classes of all iframes with a parent div class of .gallery. I just want to change the iframe src of the .gallery with the same index value as the variable 'clicked'.

//When an link with a class of .thumb is clicked

$(document).on('click', '.thumb', function () {

    //variable index is the index of the links parent 'li'
    var clicked = $(this).parent('li').index();

    // Find iFrames of all .comm-gallery elements and alter their src to iframes data-src    value
    $('.gallery').find("iframe").prop("src", function(){

        // Set their src attribute to the value of data-src
        return $(this).data("src");
    });
});

I've tried numerous loop solutions over the past few hours but none have worked and, as I know little about js at this point, I imagine that I am the lowest common denominator in this. Any help would be greatly appreciated!

Do you try .eq like $('.gallery').find("iframe").eq(clicked).prop(..? — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Mar 11, 2013 at 17:45
Already accepted the other answer, but this also worked. Thanks buddy! — Bill Dukelow
– Bill Dukelow, Commented Mar 11, 2013 at 18:09
If .eq works for you, then I suggest you go by that. It is more like iterating 1 item vs iteration all item and comparing the index. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Mar 11, 2013 at 18:22
Will do! trying to make it as lightweight as possible so this is perfect! — Bill Dukelow
– Bill Dukelow, Commented Mar 11, 2013 at 19:17

Adil · Accepted Answer · 2013-03-11 17:45:11Z

3

Add condition before returning data-src

$('.gallery').find("iframe").prop("src", function(){
if($(this).index() == clicked)
  // Set their src attribute to the value of data-src
   return $(this).data("src");
});

answered Mar 11, 2013 at 17:45

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Selvakumar Arumugam Over a year ago

.eq seems to be a lot better than doing a comparison inside. That is if I am understanding it correctly.

Bill Dukelow Over a year ago

Thanks for the quick response! This worked perfectly and makes more logical sense than the .each method I was trying to achieve! Thank you thank you thank you! I'd +1 you but it won't allow me because i'm a noob with a low rep so I hope a "You're awesome" will do!

DickieBoy · Accepted Answer · 2013-03-11 17:46:13Z

0

The jquery eq selector is what your after:

http://api.jquery.com/eq-selector/

so this:

$('.gallery').find("iframe").prop("src", function(){

    // Set their src attribute to the value of data-src
    return $(this).data("src");
});

becomes:

$('.gallery').find("iframe").eq(clicked).prop("src", function(){

    // Set their src attribute to the value of data-src
    return $(this).data("src");
});

answered Mar 11, 2013 at 17:46

DickieBoy

4,9661 gold badge31 silver badges49 bronze badges

1 Comment

Bill Dukelow Over a year ago

Thanks! Going to take a few hours to sit down and learn about this as its obviously a fundamental part of js. My js learning in the last week has been staggered between the basics and the niche areas which is not the best approach.

Abdallah Al Barmawi · Accepted Answer · 2013-03-11 18:00:43Z

0

you to have select the element that has 'gallery' css class with index of clicked li.

$(document).on('click', '.thumb', function () {
var clicked = $(this).parent('li').index();
$('.gallery').eq(clicked).find("iframe").prop("src",function({
return$(this).data("src");
});
});

answered Mar 11, 2013 at 18:00

Abdallah Al Barmawi

861 silver badge8 bronze badges

Collectives™ on Stack Overflow

JQuery - Pass value of variable to index value of class

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related