how to use jquery loop function to target many element with different ids

Question

Currently, I have this code:

$(document).ready(function(){
    // #filtertab-00 replace this with your element id
    $('#filtertab-00 .box-content .es-nav .elastislide-next, #filtertab-00 .box-content     .es-nav .elastislide-prev').click(function() {
    // trigger lazy load
    $("#filtertab-00 img.lazy").each(function(i) {
        $(this).delay(150*i).fadeIn(1000, function() {
            var src = $(this).attr("data-original");
            $(this).attr('src',src);
        });
    });
});

});

and i want to use this function to target object names (id) as below:

filtertab-00
filtertab-10
filtertab-20
filtertab-30
filtertab-40
filtertab-50
filtertab-60
....
filtertab-90

Does anyone know how to use the loop function to get it work?

i just want this: when i click pre or next button after i select a tab(name varies from filtertab-00 to filtertab-90),it will activate lazyloading for images at current selected tab.

any idea is welcome!

Can you give them all a common CSS class that works as a selector? That would be easier. — tadman
– tadman, Commented Apr 25, 2014 at 18:40
"Will this work?" - well, to answer that question I'd have to run it. Given you can do this as easily you shouldn't need to ask us if something works. You can run it and tell us why it doesn't work (error message, incorrect results, etc.) or if it does work then no need to even ask a question... — Chris
– Chris, Commented Apr 25, 2014 at 18:44
it has common css class ,but the class is used by others too.it is not independent.how to make it work? — simon110529
– simon110529, Commented Apr 25, 2014 at 18:44

filoxo · Accepted Answer · 2014-04-25 19:07:02Z

1

Perhaps you could use jQuery's attribute-starts-with selector. You can then just select all IDs that begin with filtertab- using jQuery like this:

$('div[id^="filtertab-"]').each( //magic goes here );

Note: This method is slow because it has to search the DOM for elements with IDs that meet the criteria, but it does the job. I've never noticed an appreciable latency.

answered Apr 25, 2014 at 19:07

filoxo

8,3983 gold badges35 silver badges40 bronze badges

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

7 Comments

simon110529 Over a year ago

but if i do so ,i click the '>' '<',then it will activate all the images for lazyloading instead of lazyloading the images at the current tab.

simon110529 Over a year ago

i click pre or next button when i select a tab(name varies from filtertab-00 to filtertab-90),it will activate lazyloading for images at current selected tab.

filoxo Over a year ago

I'll try looking at the source code on your jsBuying site, but I'm having some difficulty actually identifying the issue. I'll update if I find anything helpful.

filoxo Over a year ago

@user3571443 From what I can see, the problem is that the images are already loaded when you use the < or > arrows because Lazy Load is dependent on scroll height. You would need to find a way to leave off the .lazy class from the images until they are visible in the browser, which is another issue entirely. Alternatively, I'm guessing that you purchased this BossModule for the carousel, so could instead modify that script instead to create a fadeIn effect.

simon110529 Over a year ago

i enable the code at the bottom to make sure that:when i scroll down ,images at carousels will load automatically.but as a matter of fact ,as you mentioned,lazyload is dependent on scroll height,and what is more ,it only load the images at the view port,images at first tab(after enable ski_invisible) will not load after clicking < or >.that's why i want to use code which can detect click event and load the images at current selected tab.

|

anno1337 · Accepted Answer · 2014-04-25 19:31:31Z

0

This is solved through selector magic as filoxo described but since you want the images, here's another version involving find() to get your actual images.

$('div[id^="filtertab-"]').find("img.lazy").each(function(i) {
  $(this).delay(150*i).fadeIn(1000, function() {
    var src = $(this).attr("data-original");
    $(this).attr('src',src);
  });
});

In addition to that, check out the impressive list of jQuery selectors. They cover a lot of ground :)

edited Apr 25, 2014 at 19:31

answered Apr 25, 2014 at 19:11

anno1337

12711 bronze badges

3 Comments

anno1337 Over a year ago

Sorry, had one to many closing brackets in there. It should work now.

simon110529 Over a year ago

hi,yes,console reports no problem,but lazyload got a problem now.it will not show the products normally at first tab in carousel(homefilter),i really have nothing to do now:(

simon110529 Over a year ago

the code uses to activate lazyload after click '<' or '>' ,it seems that it doesnt work at this sense.

Collectives™ on Stack Overflow

how to use jquery loop function to target many element with different ids

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related