How to loop trough all elements and get their attribute Javascript

Question

I'm learning javascript loops and arrays and I'm wondering if I can get all buttons attributes, like in my code when I click on submit button I want to loop through all buttons (with class "seat") attributes named "value" and to set statement if its "value=1" to change background color to red.

 <div id="tickets">
    <button value="0" class="seat">1</button>
    <button value="0" class="seat">2</button>
    <button value="0" class="seat">3</button>
    <button value="0" class="seat">4</button>
    <button value="0" class="seat">5</button>
    <button value="0" class="seat">6</button>
    <button value="0" class="seat">7</button>
    <button value="0" class="seat">8</button>
    <button value="0" class="seat">9</button>
    <button value="0" class="seat">10</button>
    <button id="submit-btn">Submit</button>
</div>

There is a JQuery code

$(".seat").click(function (e) { 
e.preventDefault();
let value = $(this).attr("value");
if (value === "0") {
    $(this).addClass("active");
    $(this).attr("value", "1");
}else if (value === "1"){
    $(this).removeClass("active");
    $(this).attr("value", "0");
}
});

Here I'm adding value to 1 and everything is working okay, its adding class Active and changing value, now I tryed to make loop and check all buttons values and if its 1 to add class which is changing background color to red, but I just cant figure out how to do that, tryed some solutions didtn worked.

EDIT Tryed with loop like this from @Kenny not working

$("#submit-btn").click(function () { 

$(".seat").each((elem) => {
    if ($(elem).attr('value') === '1') {
       $(elem).addClass('reserverd');
    }
 });

});

If I didn't misunderstood the question. This is what you want. Your click handler works fine. But you want a function which will loop through each elements and check value attribute to add class for background red? Am I correct? Or you want to do this all in click handler? — Kiran Shinde
– Kiran Shinde, Commented May 6, 2020 at 11:32
@Kenny Yes Kenny my event is working fine but I want Submit button at end when I click on that to loop trought buttons with class name ".seat" and check attribute value, if it s 1 to add class with background color red. — GomuGomu
– GomuGomu, Commented May 6, 2020 at 11:40
Have a look (debug) what elem is - it's the index. Call .each as .each((idx, elem) => and your code will work api.jquery.com/each — fdomn-m
– fdomn-m, Commented May 6, 2020 at 11:48
@Alco. There was a mistake. Though updated my answer. Thanks to freedomn-m for pointing it — Kiran Shinde
– Kiran Shinde, Commented May 6, 2020 at 11:53
The simplest solution to your problem, but not to the issue of learning loops, is: $(".active").addClass("reserved"). For learning: consider result sets as a whole rather than individual items (like going from procedural programming and OO to SQL) — fdomn-m
– fdomn-m, Commented May 6, 2020 at 12:35

Kiran Shinde · Accepted Answer · 2020-05-06 11:51:24Z

6

How about this?

$(".seat").each((index, elem) => {
   if ($(elem).attr('value') === '1') {
      $(elem).addClass('background-red');
   }
});

edited May 6, 2020 at 11:51

answered May 6, 2020 at 11:26

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

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

3 Comments

fdomn-m Over a year ago

Have a look (debug) what elem is - it's the index. Call .each as .each((idx, elem) => and your code will work api.jquery.com/each

Kiran Shinde Over a year ago

@freedomn-m thanks for pointing. It's been so long working on jquery forgot the sequence of arguments of jquery.each. Thanks

fdomn-m Over a year ago

I only remember it because it's the wrong way round :)

T.J. Crowder · Accepted Answer · 2020-05-06 11:25:43Z

Your click handler runs with this referring to the button that was clicked. But in that handler (or a handler for a completely different button), you can also get all buttons the way you did when hooking up the handler: $(".seat"). You can loop through it with each. Within each, this (as with the event handler) is a reference to the button for that loop.

So you could do what you've done in your handler, just in an each callback instead:

// (You'd probably have this inside an event handler)
$(".seat").each(function() { 
    let value = $(this).attr("value");
    if (value === "0") {
        $(this).addClass("active");
        $(this).attr("value", "1");
    }else if (value === "1"){
        $(this).removeClass("active");
        $(this).attr("value", "0");
    }
});

I'd probably change the code updating value and the class list a bit, just FWIW:

// (You'd probably have this inside an event handler)
$(".seat").each(function() { 
    // HTML form elements have a `value` property you can use directly, no
    // need for jQuery to do it.
    this.value = this.value === "0" ? "1" : "0";

    // jQuery does make toggling a class a bit easier cross-browser:
    $(this).toggleClass("active", this.value === "1")

    // That said, on modern browsers (*not* IE, not even IE11), you could do this:
    // this.classList.toggle("active", this.value === "1")
});

(Sadly, although IE10 and IE11 have classList and toggle, they don't support the second argument to it.)

Collectives™ on Stack Overflow

How to loop trough all elements and get their attribute Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related