jQuery add count to class

Question

I've been stairing, trying and tweaking this code for over 2hrs now and I'm still no closer to figuring it out.

I'm trying to do the following,

If div has class .item1, .item2, .item3 add css style to each, But I need the .item(number) to get count automatically as further in my script I have divs that are automatically created with .item(number) classes.

I just need the '.single-attendee-wrapper' to have '.item + (i+1)' aswell but I cant get this to work.

Latest amends -

/* Inline validation */
.on( 'blur change', '.input-text', function() {
    $(".single-attendee-wrapper").each(function(i){
        var $this = $(this);
        var validated = true;

        if ( $(".cart > .item" + (i+1)) ) {
            if ( $this.val() == '' ) {
                $(".item" + (i+1) + " .count").css('background','#ED616A');
                $(".item" + (i+1) + " .count").css('color','#fff');
                validated = false;
            }
        }
        if ( validated ) {
                $(".item" + (i+1) + " .count").css('background','#D1D3D4');
                $(".item" + (i+1) + " .count").css('color','#808285');
        }

    });
} )

Here is my snippet so far,

.on( 'blur change', '.input-text', function() {
    var count = 0;


    $(".single-attendee-wrapper .input-text").each(function(){
        var $this = $(this);
        var validated = true;
        count++;

        if ( $(this) ) {
            if ( $this.val() == '' ) {
                $('.item'+ count + ' .count').css('background','#ED616A');
                $('.item'+ count + ' .count').css('color','#fff');
                validated = false;
            }
        }
        if ( validated ) {
                $('.item'+ count + ' .count').css('background','#D1D3D4');
                $('.item'+ count + ' .count').css('color','#808285');
        }

    });
} )

Further into my script, this works perfect.

$(".single-attendee-wrapper").each(function(i) {
        $(this).addClass("item" + (i+1));
    });

HTML

<div class="single-attendee-wrapper item1">
<div class=" product-addon product-addon-one-attendee" style="display: block;">
<div class="count" style="">1</div>
</div>
<div class="single-attendee-wrapper item2">
<div class=" product-addon product-addon-two-attendees" style="display: block;">
<div class="count" style="">2</div>
</div>
<div class="single-attendee-wrapper item3">
<div class=" product-addon product-addon-three-attendees" style="display: block;">
<div class="count" style="">3</div>
</div>

Can you add some HTML for me to work with? I'm having trouble understanding exactly what your issue is. — Soturi
– Soturi, Commented Sep 6, 2013 at 11:36
I've successfully added '.item(number)' to '.single-attendee-wrapper' and now I'm wanting to make the script find all '.item(numbers)' and add the css to it. I can do it the long way by typing in all the .item classes indervidually but to save time i though finding an awser to fix. — Delete
– Delete, Commented Sep 6, 2013 at 11:41
Thats great, but I still can't really help you without any HTML to analyze your code against. — Soturi
– Soturi, Commented Sep 6, 2013 at 11:45

insertusernamehere · Accepted Answer · 2013-09-06 11:59:58Z

1

If you want to select all classes starting with item{*}, you can use the "Attribute Starts With Selector [name^="value"]":

$("div[class^='item']")

Demo

Try before buy

answered Sep 6, 2013 at 11:59

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

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

6 Comments

Delete Over a year ago

This would work if I was targeting all items but I want to add style to the div with the same item(number).

insertusernamehere Over a year ago

Hm, then I still don't get you. Can you please rephrase your problem?

Delete Over a year ago

I have 12 divs each with there own class e.g .item1, .item6, .item12 I'm wanting to add css style to the individual div using the class number e.g div has .item8 the style would need to be added to .item8, I hope this helps you understand my problem.

insertusernamehere Over a year ago

So is your problem actually that $('.item'+ count + ' .count') fails?

Delete Over a year ago

Yeah, Looks like the count isn't picking up the correct number

|

Collectives™ on Stack Overflow

jQuery add count to class

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related