jQuery 获取.active元素的索引，但参考其原始兄弟

Question

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 3x3 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 3x3 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 7x14 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

Answer 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>