Bollate

HTML

[ANSWERED] javascript – jQuery get index of .active element, but with reference to its original siblings

By

Nov 20, 2022 , , ,

Solution 1 :

You could do it like this:

$(".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>

If you want to have as console output just an array of all active seats:

 $(".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);
    });
 });

Update: As the markup in this answers differs too much from the real markup shared later in the question, here’s the adjusted code to work with the shared markup.

      $(".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";
      });
body {
  margin: 60px;
  background: #111;
}

.theatre {
  display: flex;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cinema-seats {
  display: flex;
}

.cinema-seats .seat {
  cursor: pointer;
}

.cinema-seats .seat:hover:before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #edffc7;
  border-radius: 7px;
}

.cinema-seats .seat.active:before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #7cb715;
  border-radius: 7px;
}

.left .cinema-row {
  transform: skew(-15deg);
  margin: 0 10px;
}

.left .seat {
  width: 35px;
  height: 50px;
  border-radius: 7px;
  background: linear-gradient(
    to top,
    #761818,
    #761818,
    #761818,
    #761818,
    #761818,
    #b54041,
    #f3686a
  );
  margin-bottom: 10px;
  transform: skew(20deg);
  margin-top: -32px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.left .row-2 {
  transform: skew(-13deg);
}

.left .row-2 .seat {
  transform: skew(18deg);
}

.left .row-3 {
  transform: skew(-12deg);
}

.left .row-3 .seat {
  transform: skew(16deg);
}

.left .row-4 {
  transform: skew(-11deg);
}

.left .row-4 .seat {
  transform: skew(15deg);
}

.left .row-5 {
  transform: skew(-10deg);
}

.left .row-5 .seat {
  transform: skew(12deg);
}

.left .row-6 {
  transform: skew(-9deg);
}

.left .row-6 .seat {
  transform: skew(10deg);
}

.left .row-7 {
  transform: skew(-7deg);
}

.left .row-7 .seat {
  transform: skew(8deg);
}

.right {
  margin-left: 70px;
}

.right .cinema-row {
  transform: skew(7deg);
  margin: 0 10px;
}

.right .seat {
  width: 35px;
  height: 50px;
  border-radius: 7px;
  background: linear-gradient(
    to top,
    #761818,
    #761818,
    #761818,
    #761818,
    #761818,
    #b54041,
    #f3686a
  );
  margin-bottom: 10px;
  transform: skew(-8deg);
  margin-top: -32px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.right .row-2 {
  transform: skew(9deg);
}

.right .row-2 .seat {
  transform: skew(-10deg);
}

.right .row-3 {
  transform: skew(10deg);
}

.right .row-3 .seat {
  transform: skew(-12deg);
}

.right .row-4 {
  transform: skew(11deg);
}

.right .row-4 .seat {
  transform: skew(-15deg);
}

.right .row-5 {
  transform: skew(12deg);
}

.right .row-5 .seat {
  transform: skew(-16deg);
}

.right .row-6 {
  transform: skew(13deg);
}

.right .row-6 .seat {
  transform: skew(-18deg);
}

.right .row-7 {
  transform: skew(15deg);
}

.right .row-7 .seat {
  transform: skew(-20deg);
}
.booked {
  color: white;
}
.rows {
  color: white;
  margin-top: -160%;
}
.columns {
  color: white;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="theatre">
      <div class="cinema-seats left">
        <div class="cinema-row row-1">
          <h1 class="rows"></h1>
          <div class="columns">A</div>
          <div class="columns">B</div>
          <div class="columns">C</div>
          <div class="columns">D</div>
          <div class="columns">E</div>
          <div class="columns">F</div>
          <div class="columns">G</div>
        </div>
        <div class="cinema-row row-1">
          <h1 class="rows">1</h1>
          <div class="seat A1"></div>
          <div class="seat B1"></div>
          <div class="seat C1"></div>
          <div class="seat D1"></div>
          <div class="seat E1"></div>
          <div class="seat F1"></div>
          <div class="seat G1"></div>
        </div>

        <div class="cinema-row row-2">
          <h1 class="rows">2</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-3">
          <h1 class="rows">3</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-4">
          <h1 class="rows">4</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-5">
          <h1 class="rows">5</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-6">
          <h1 class="rows">6</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-7">
          <h1 class="rows">7</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
      </div>

      <div class="cinema-seats right">
        <div class="cinema-row row-1">
          <h1 class="rows">8</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-2">
          <h1 class="rows">9</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-3">
          <h1 class="rows">10</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-4">
          <h1 class="rows">11</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-5">
          <h1 class="rows">12</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-6">
          <h1 class="rows">13</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-7">
          <h1 class="rows">14</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
      </div>
    </div>
    <div>
      <h1 class="booked"></h1>

Problem :

I am toggling an active class to an object in jquery in a grid like so :

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

Basically, if I have a 3×3 grid of boxes, and click on 2 boxes randomly, they will be assigned active classes. Now, I want to get the index of the active boxes, but with respect to the original 3×3 grid.

For example,

   box 1(active)       box2             box3
   box 4               box5(active)     box6
   box 4               box5             box6

Now, as output, I am expecting to get 1,5 as they are the indexes of the active classes with respect to the boxes.

This is a small example, I want to do this with a 7×14 grid, arranged into columns and rows and have only one class => “.seats” in common. Again, I want to get the index (n-th child) of the active boxes with respect to all the seats.

Codepen – https://codepen.io/divi7/pen/zYvbbVN

Comments

Comment posted by ssomename

Thanks for answering, but this is giving too many outputs on the console and the index is restarting for every row, I am adding a codepen link to my question to be cleaerer

Comment posted by imgur.com/HMpX875

imgur.com/HMpX875

Comment posted by matthias_h

@DivyanshSingh The markup in my answer differs too much from the actual markup you use in the Codepen you added later. I have to check how to adjust the code so it works with your markup.

Comment posted by jsfiddle.net/5tf8y0vg

@I’ve just adjusted your code and found a solution:

By

Related Post

HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022
HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022