how to loop the dynamically generated id?

Question

        /**Script**/ 
      function AnimateFish() {
        var Fish3 = $("#fish1").not(".HoverFish"),
            theContainer = $("#container"),
            maxLeft = theContainer.width() - Fish3.width() - 50,
            maxTop = theContainer.height() - Fish3.height(),
            leftPos = Math.floor(Math.random() * maxLeft),
            topPos = Math.floor(Math.random() * maxTop) + 100,
            imgRight = "Assets/fish-glow3-right.gif",
            imgLeft = "Assets/fish-glow3.gif";


        if (Fish3.position().left <= leftPos) {
            $(this).css("background-image", 'url("' + imgRight + '")');
        } else {
            $(this).css("background-image", 'url("' + imgLeft + '")');
        }

        Fish3.animate({
            "left": leftPos,
            "top": topPos
        }, 1800, AnimateFish);
    }
 AnimateFish();

Hi here the id "#fish1" that will generate dynamically like #fish1, #fish2 #fish3 ... actually i want this function should be run for all the id's that generate please give me the slution and ONE MAIN PROBLEM FISH IS GOING REVERSE FOR THIS CODE I TRIED LOT PLZ CAN U PPL HELP ME...

Use a selector to do this. http://stackoverflow.com/questions/5002966/jquery-or-css-selector-to-select-all-ids-that-start-with-some-string — Brett Weber, Aug 20 '14 at 16:04
and this site usually doesn't respond well to "give me the solution". Your question is well formed other than that in my opinion. Welcome to the community — Brett Weber, Aug 20 '14 at 16:05
He didn't say "give me the solution", he just wants the slution. — Marcel, Aug 20 '14 at 16:06

score 2 · Answer 1 · answered Aug 20 '14 at 16:06

2

Add a class 'fish' to your #Fishes elements. Then:

$(".fish").each(function () {
  //do your stuff here, $(this) representing your #Fish element
});

answered Aug 20 '14 at 16:06

Rafouille

863
10
16

A loop may not be needed. You could use $([id^=fish]) for some things – Marcel Aug 20 '14 at 16:08
1

You're right catalyst's answer is better. – Rafouille Aug 20 '14 at 16:10

score 2 · Answer 2 · edited May 23 '17 at 10:26

2

If you want to continue using ids for your "fish" (#fish1, #fish2, etc.)

See this question's answer

$("[id^=fish]")

This reads, "For each element with id that starts with 'fish'..."

edited May 23 '17 at 10:26

Community

1
1

answered Aug 20 '14 at 16:09

catalyst294

129
9

score 0 · Answer 3 · answered Aug 20 '14 at 16:25

0

Disclaimer : this is untested, but it should help you get a good pattern

function AnimateFish() 
{
    var aFish      = $('[id^="fish"]:not(.HoverFish)'); // get the fish that aren't hovering
    var oContainer = $("#container");

    aFish.each(function(nIndex, oFish)
    {
        var nMaxLeft   = oContainer.width()  - oFish.width() - 50;
        var nMaxTop    = oContainer.height() - oFish.height();
        var nLeftPos   = Math.floor(Math.random() * nMaxLeft);
        var nTopPos    = Math.floor(Math.random() * nMaxTop) + 100;
        var sImgRight  = "Assets/fish-glow3-right.gif";
        var sImgLeft   = "Assets/fish-glow3.gif";

        if (oFish.position().left <= nLeftPos)
            $(this).css("background-image", 'url("' + sImgRight + '")');
        else 
            $(this).css("background-image", 'url("' + sImgLeft + '")');

        oFish.animate({
            "left": nLeftPos,
            "top" : nTopPos
        }, 1800, AnimateFish);
    }
}
AnimateFish();

answered Aug 20 '14 at 16:25

Brett Weber

1,839
18
22

thanks i able to select all id's, here if i have more than one fish the background image is not working properly "fish is going reverse" in that if condition some problem can give soln ?? i tried lotttt :( – manoji stack Aug 20 '14 at 16:41
honestly, I'm not sure. I just cleaned the code up to accomplish your original question.Potentially try adjusting the if so that the conditions are reversed or maybe the problem is in the animation? Digging into it may be the only solution I can tell you – Brett Weber Aug 20 '14 at 16:45
IF it goes only reverse i can do that but its randomly reverse and straightly going :( – manoji stack Aug 20 '14 at 16:47
hm.. I'm not sure. Debug into it and check any relevant values that could cause the behavior, or post another question. – Brett Weber Aug 20 '14 at 16:48

how to loop the dynamically generated id?

3 Answers3