push a value into an array

Question

I have the following html code:

<div class="big-bus-right-part" id="bis-bus-first-floor">               
  <div id="posB100" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB101" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB102" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB103" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB104" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB105" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB106" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">1</div>
  <div id="posB107" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">2</div>
</div>

I have the following JavaScript code:

bc.vehicleSeatFirstFloorHandleEvent = function (el) {
  if ($(el).text().length > 0) {
      $(el).toggleClass('selected');    
  }

  var array = new Array();
  var frontSeats = new Array();
  var selectedSeats = $('#bis-bus-first-floor').find('.vehicle-seat.selected').html();
  console.log(selectedSeats);

  frontSeats.push(selectedSeats);
  console.log(frontSeats);
}

What I want to do is grap all the values that have the selected class into the html (see values 1 and 2 in the html) and push them into the array..

Answer 1

You can do that with jQuery's map and get :

var frontSeats = $('#bis-bus-first-floor')
                    .find('.vehicle-seat.selected')
                    .map(function() {
                        return $(this).html();
                    })
                    .get();

frontSeats will be an array containing "1" and "2" .

Example:

 var bc = {}; bc.vehicleSeatFirstFloorHandleEvent = function (el) { if ($(el).text().length > 0) { $(el).toggleClass('selected'); } var frontSeats = $('#bis-bus-first-floor') .find('.vehicle-seat.selected') .map(function() { return $(this).html(); }) .get(); console.log(frontSeats); }; 

 .vehicle-seat { display: inline-block; border: 1px solid #ddd; width: 1em; height: 1em; } 

 <div class="big-bus-right-part" id="bis-bus-first-floor"> <div id="posB100" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div> <div id="posB101" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div> <div id="posB102" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div> <div id="posB103" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div> <div id="posB104" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div> <div id="posB105" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div> <div id="posB106" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">1</div> <div id="posB107" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">2</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

Also::

(function (el) {
  if ($(el).text().length > 0) {
      $(el).toggleClass('selected');    
  }

  var frontSeats = [] 
  var selectedSeats = $('.selected').each(function(){
    frontSeats.push($(this).html());
    })
  console.log(frontSeats);
})()