How to execute the same JQuery code for different html elements?

Question

Good evening and good night where ever you are, I am just a beginner at web developing and working on a little project for learning.

i have a problem (which I am sure it's very simple but i have no idea what should i do)

i have this code where i was trying to fill rate-stars depending on a value for each one:

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}

for (i = 1; i< 3 ; i++) {
    var val = 'input[name=amount'+i+']';
    var id = 'saj' + i;
    var submit = '#sa' + i;
    var extendedId = '#so' + i;

    $(function() {          
        $(submit).click(function() {
            $(extendedId).html('<span id = "'+id+'" class="stars">'+parseFloat($(val).val())+'</span>');
            $('#'+id).stars();
        });         
        $(submit).click();
    });
}

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

.sajed {
    display :none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "sajed" type="text" name="amount1" value="2.5" />
<input id = "sa1" class = "sajed" type="submit" value="update"/>
<p id = "so1" ><span >2.4618164</span></p>

<input class = "sajed" type="text" name="amount2" value="4" />
<input id = "sa2" class = "sajed" type="submit" value="update"/>
<p id = "so2"><span >2.4618164</span></p>

I got this code from internet, I needed to add it several times, it's working if I repeat html,css(with different class name), and jquery's functions.

what i wanted to do is to add the html code several times and use the same css and JQuery on it

I have to stars element, I am calling the above function inside a for loop but only the LAST element in the loop has the effect.

when i start the for loop from 0 to 1 just the FIRST stars got the shape when i start the for loop from 0 to 2 just the SECOND stars got the shape when i start the for loop from 0 to 3 NOTHING HAPPENS.

I am sorry for that bad illustration but i hope you got what i mean from the code and the next picture which has the result i got

the first one happens when the loop ends at index 1 and the second when it ends at 2 and the third when it ends at indexes bigger than 2

Screen Shot

trincot · Accepted Answer · 2017-05-13 23:23:22Z

1

Your loop finishes before any of the click handlers execute, therefore your variables will be set to their final value, giving you the effect that you see.

You can solve this by using let instead of var: that way the variables (like id) become local to the for loop block, and the event handler function will reference the right one.

Another thing which you should correct in $.fn.star: a jQuery plug-in function will have this set to the jQuery collection to which the method is applied. That means it already is jQuery, and you should not wrap this in $(this). Just do this.each(...).

answered May 13, 2017 at 23:23

trincot

357k38 gold badges282 silver badges339 bronze badges

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

1 Comment

Sajed Almorsy Over a year ago

I started to love this website.. as you were waiting for me to post XD that definitely worked thanks for helping, i appreciate that.

Mohamed-Yousef · Accepted Answer · 2017-05-13 23:55:52Z

0

Actually, I think there is no need for .each() loop in your plugin and the for loop as well .. you can make your code like this

$.fn.stars = function() {
    return //$(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    //});
}
$(function() {          
    $('input[id^="sa"]').on('click',function(e) {
        e.preventDefault();
        var ThisIt = $(this);
        ThisIt.next('[id^="so"]').html('<span class="stars">'+parseFloat(ThisIt.prev('input[name^="amount"]').val())+'</span>');
        ThisIt.next('[id^="so"]').find(' > span').stars();
    }).click();
});

span.stars, span.stars span {
    display: block;
    background: url(http://placehold.it/350x150) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

.sajed {
    /*display :none;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "sajed" type="text" name="amount1" value="2.5" />
<input id = "sa1" class = "sajed" type="submit" value="update"/>
<p id = "so1" ><span >2.4618164</span></p>

<input class = "sajed" type="text" name="amount2" value="4" />
<input id = "sa2" class = "sajed" type="submit" value="update"/>
<p id = "so2"><span >2.4618164</span></p>

answered May 13, 2017 at 23:55

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

1 Comment

Sajed Almorsy Over a year ago

thanks for concerning .. that was a nice one :)))) thanks.

Collectives™ on Stack Overflow

How to execute the same JQuery code for different html elements?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related