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

You'll have to iterate, but why do you want the HTML, why not just the elements themselves, wich jQuery gives you in an array-like object anyway ? — adeneo
– adeneo, Commented Mar 22, 2017 at 13:22
How do the 1 and 2 get there? What if the user clicks one of the others that doesn't have anything in it? — T.J. Crowder
– T.J. Crowder, Commented Mar 22, 2017 at 13:23
Change new Array() to [] as it's significantly faster, and also easier to type. — evolutionxbox
– evolutionxbox, Commented Mar 22, 2017 at 13:24
Separately, I'd recommend using jQuery to hook up the event handler rather than using an onclick attribute. For one thing, then you don't have to make the handler global, and you'd probably also benefit from using delegated handling. — T.J. Crowder
– T.J. Crowder, Commented Mar 22, 2017 at 13:24

T.J. Crowder · Accepted Answer · 2017-03-22 13:41:41Z

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>

KornholioBeavis · Accepted Answer · 2017-03-22 13:27:33Z

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

answered Mar 22, 2017 at 13:27

KornholioBeavis

2,4522 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

push a value into an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related