Get the index of the currently active element in jQuery, taking into account its position among its original sibling elements

Question

Get the index of the currently active element in jQuery, taking into account its position among its original sibling elements

I am implementing a function in jQuery to toggle an 'active' class on elements within a grid. Here is the code snippet:

$(".cinema-seats .seat").on("click", function () {
    $(this).toggleClass("active");
}

Essentially, when clicking on random boxes in a 3x3 grid, they are assigned the 'active' class. What I aim to achieve next is to determine the index of these active boxes in relation to the original grid.

For instance,

   box 1(active)       box2             box3
   box 4               box5(active)     box6
   box 7               box8             box9

The expected output would be 1,5 as they represent the indexes of the active classes within the grid.

This is just a simple illustration; my ultimate goal is to replicate this behavior in a larger 7x14 grid, organized into rows and columns, with all elements sharing the common class '.seats'. Once again, the objective is to retrieve the index (n-th child) of the active boxes with respect to all seats.

View the project on Codepen - https://codepen.io/divi7/pen/zYvbbVN

javascript html jquery css

Answer 1

Answer №1

If you're looking to implement this functionality, consider following this approach:

$(".cinema-seats .seat").on("click", function() {
      $(this).toggleClass("active");
      let active = $(".cinema-seats .seat.active");
      active.each(function() {
        console.log($(this).index() + 1);
      });
    });

.seat {
      float: left;
      padding: 10px;
    }
    .seat:nth-of-type(3n + 1) {
      clear: left;
    }
    .active {
      color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="cinema-seats">
      <div class="seat">
        box 1
      </div>
      <div class="seat">
        box 2
      </div>
      <div class="seat">
        box 3
      </div>
      <div class="seat">
        box 4
      </div>
      <div class="seat">
        box 5
      </div>
      <div class="seat">
        box 6
      </div>
      <div class="seat">
        box 7
      </div>
      <div class="seat">
        box 8
      </div>
      <div class="seat">
        box 9
      </div>
    </div>

To show an array of all active seats in the console output:

 $(".cinema-seats .seat").on("click", function() {
    let seats = [];
    $(this).toggleClass("active");
    let active = $(".cinema-seats .seat.active");
    active.each(function() {
      seats.push($(this).index() + 1);
      console.log(seats);
    });
 });

For better compatibility with the shared markup in the question, here's an adjusted version of the code snippet:

$(".cinema-seats .seat").on("click", function () {
      $(this).toggleClass("active");
      let seats = [];
      let active = $(".seat.active");
      active.each(function() {
        let seatsPerRow = $(this).parent().find(".seat").length;   
        if (!$(this).closest(".cinema-seats").hasClass("right")) {
          let prevRows = $(this).parent(".cinema-row").prevAll(".cinema-row").length - 1;
          seats.push($(this).index() + (seatsPerRow * prevRows));
          console.log(seats);
        } else {
          let leftSeats = $(".left").find(".seat").length;
          let prevRows = $(this).parent(".cinema-row").prevAll(".cinema-row").length;
          seats.push($(this).index() + leftSeats + (seatsPerRow * prevRows));
          console.log(seats);
        }
      });
      var bookedSeats = document.querySelectorAll(".active").length;
      var yahan = document.querySelector(".booked");
      yahan.innerHTML = bookedSeats + " Booked";
    });


    /* CSS styling for the cinema layout */
    
    body {
      margin: 60px;
      background: #111;
    }

    .theatre {
      display: flex;
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
      
    /* Add your custom styles here */

/* Include necessary libraries and set up the cinema seating arrangement */

Answer 2

If you're looking to implement this functionality, consider following this approach:

$(".cinema-seats .seat").on("click", function() {
      $(this).toggleClass("active");
      let active = $(".cinema-seats .seat.active");
      active.each(function() {
        console.log($(this).index() + 1);
      });
    });

.seat {
      float: left;
      padding: 10px;
    }
    .seat:nth-of-type(3n + 1) {
      clear: left;
    }
    .active {
      color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="cinema-seats">
      <div class="seat">
        box 1
      </div>
      <div class="seat">
        box 2
      </div>
      <div class="seat">
        box 3
      </div>
      <div class="seat">
        box 4
      </div>
      <div class="seat">
        box 5
      </div>
      <div class="seat">
        box 6
      </div>
      <div class="seat">
        box 7
      </div>
      <div class="seat">
        box 8
      </div>
      <div class="seat">
        box 9
      </div>
    </div>

To show an array of all active seats in the console output:

 $(".cinema-seats .seat").on("click", function() {
    let seats = [];
    $(this).toggleClass("active");
    let active = $(".cinema-seats .seat.active");
    active.each(function() {
      seats.push($(this).index() + 1);
      console.log(seats);
    });
 });

For better compatibility with the shared markup in the question, here's an adjusted version of the code snippet:

$(".cinema-seats .seat").on("click", function () {
      $(this).toggleClass("active");
      let seats = [];
      let active = $(".seat.active");
      active.each(function() {
        let seatsPerRow = $(this).parent().find(".seat").length;   
        if (!$(this).closest(".cinema-seats").hasClass("right")) {
          let prevRows = $(this).parent(".cinema-row").prevAll(".cinema-row").length - 1;
          seats.push($(this).index() + (seatsPerRow * prevRows));
          console.log(seats);
        } else {
          let leftSeats = $(".left").find(".seat").length;
          let prevRows = $(this).parent(".cinema-row").prevAll(".cinema-row").length;
          seats.push($(this).index() + leftSeats + (seatsPerRow * prevRows));
          console.log(seats);
        }
      });
      var bookedSeats = document.querySelectorAll(".active").length;
      var yahan = document.querySelector(".booked");
      yahan.innerHTML = bookedSeats + " Booked";
    });


    /* CSS styling for the cinema layout */
    
    body {
      margin: 60px;
      background: #111;
    }

    .theatre {
      display: flex;
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
      
    /* Add your custom styles here */

/* Include necessary libraries and set up the cinema seating arrangement */

Get the index of the currently active element in jQuery, taking into account its position among its original sibling elements

Answer №1

Similar questions

Visualizing live data streaming from MySQL

Prevent Click Event on Angular Mat-Button

The replication technique in Threejs

Is there a way to directly display all the content in pagination format without a print preview option?

display a discrete delete button when pressing a button within ng-bootstrap

After a loop, a TypeScript promise will be returned

What is the best way to invoke a function in a class from a different class in Angular 6?

Is there a method available within the Collada loader to extract multiple meshes from the scene object?

Guide to retriecing a state in Next.js 14

The onchange functionality is not functioning as expected

Sending a concealed input according to the chosen option

Images with scratches visible in Chrome

Guide on utilizing loader.load() function to load a compressed file in three.js - Instructions on loading filename.json.gz

How can you modify two distinct append values individually in AngularJS?

Is there a way to minimize the use of .value in Vue 3?

Tabindex issue arises due to a conflict between Alertify and Bootstrap 4 modal

The server's response is unpredictable, causing Json.Parse to fail intermittently

Efficiently finding a group of substrings within a JavaScript string

Sorting tables in Vue.js with Buefy components for a user-friendly experience

Adjusting the height of a flexbox column to fit three rows within the space of two