Getting the value of div element using javascript and putting it in a array

Question

I have this html code and i want to get the values of the select2-search-choice div values

<div class="select2-container select2-container-multi form-control multi-select" id="s2id_project_banker_ids">
  <ul class="select2-choices">  
     <li class="select2-search-choice">    
       <div>Sam Chong</div>    
       <a href="#" class="select2-search-choice-close" tabindex="-1"></a>  
     </li>
     <li class="select2-search-choice">    
       <div>Beh Li Shiew</div>    
       <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
     </li>
     <li class="select2-search-field">    
       <label for="s2id_autogen23" class="select2-offscreen"></label>    
       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen23" name="s2id_autogen24" placeholder="" data-validate="true" aria-activedescendant="select2-result-label-198" style="width: 42px;">  
     </li>
   </ul>
</div>

So far what i did was this which seems to work but i am looking for a more efficient way of executing this code

project_bankers = []
$.each($('#s2id_project_banker_ids').find('li.select2-search-choice'), function(index, choice) {
  project_bankers.push(choice.children[0].innerHTML)
})

So just checking is there any more efficient way to do this?

You got a lot of answers what are working, but you ask for efficiency. So I create a benchmark in my second answer. @KingsleySimon — eisbehr
– eisbehr, Commented Jul 20, 2016 at 12:17

Rory McCrossan · Accepted Answer · 2016-07-20 11:24:32Z

3

You can use map() to generate an array from a set of elements in a jQuery object:

var project_bankers = $('#s2id_project_banker_ids li.select2-search-choice div').map(function() {
  return $(this).text();
}).get();

console.log(project_bankers);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select2-container select2-container-multi form-control multi-select" id="s2id_project_banker_ids">
  <ul class="select2-choices">
    <li class="select2-search-choice">
      <div>Sam Chong</div>
      <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
    </li>
    <li class="select2-search-choice">
      <div>Beh Li Shiew</div>
      <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
    </li>
    <li class="select2-search-field">
      <label for="s2id_autogen23" class="select2-offscreen"></label>
      <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen23" name="s2id_autogen24" placeholder="" data-validate="true" aria-activedescendant="select2-result-label-198" style="width: 42px;">
    </li>
  </ul>
</div>

answered Jul 20, 2016 at 11:24

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Thille Over a year ago

map() is the most elegant solution. It's more gentlemanly than just pushing stuff in an array.

Shlomi Haver · Accepted Answer · 2016-07-20 11:23:46Z

0

You can do it like this:

project_bankers = []
$.each($('#s2id_project_banker_ids li.select2-search-choice'), function(index, choice) {
  project_bankers.push(choice.children[0].innerHTML)
})

And it's even better if you can remove the li from your selector $('#s2id_project_banker_ids .select2-search-choice') this is more efficient.

answered Jul 20, 2016 at 11:23

Shlomi Haver

9749 silver badges14 bronze badges

Comments

gavgrif · Accepted Answer · 2016-07-20 11:37:51Z

0

You can target the divs more tightly:

project_bankers = [];

$('.select2-search-choice > div').each(function() {
  project_bankers.push($(this).text())
})

but I would really recommend tightenig up the code at the list end rather than at the jQuery end. - for example - putting the class on the element you wantto target (the div inside the li).

edited Jul 20, 2016 at 11:37

answered Jul 20, 2016 at 11:23

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2016-07-20 11:47:42Z

0

use this script it works

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        var array = [];
        var i = 0;
        $('.select2-search-choice div').each(function(){
            array[i] = this.innerHTML;
            i++;
        });
        alert(array);
    });
</script>

edited Jul 20, 2016 at 11:47

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

answered Jul 20, 2016 at 11:46

Zahid Iqbal

1128 bronze badges

3 Comments

Rory McCrossan Over a year ago

You could just use push() (like the other three answers already) instead of setting the index explicitly

Zahid Iqbal Over a year ago

I wrote a very simple code that is easily understanding, so i used this assignment operator.

eisbehr Over a year ago

That makes it even more complex instead of simple. ;)

eisbehr · Accepted Answer · 2016-07-20 12:20:13Z

0

Asking for the most efficient way, you have to compare $.each, $.map and the native solution provied by javascript.

If you really want to be as fast as possible, you should use plain javascript, and no jQuery at all. It might be not mutch, but the question was to be most efficient. Then there is only one way, pure js.

var project_bankers = [];
var elements = document.getElementsByClassName("select2-search-choice");

for( var i = 0, l = elements.length; i < l; i++ )
    project_bankers.push(elements[i].children[0].innerHTML);

View live Benachmark.

edited Jul 20, 2016 at 12:20

answered Jul 20, 2016 at 12:14

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Comments

eisbehr · Accepted Answer · 2016-07-20 12:24:20Z

0

Don't use find and a child select, just select the elements directly with a direct selector:

var project_bankers = [];
$('#s2id_project_banker_ids .select2-search-choice div').each(function() {
    project_bankers.push($(this).text());
});

Or completly without jQuery, plain javascript. It is the fastes way too.

var project_bankers = [];
var elements = document.getElementsByClassName("select2-search-choice");

for( var i = 0, l = elements.length; i < l; i++ )
    project_bankers.push(elements[i].children[0].innerHTML);

edited Jul 20, 2016 at 12:24

answered Jul 20, 2016 at 11:24

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

1 Comment

gavgrif Over a year ago

haha - thats basically what I did in my post - one small typo (from the OP - not you- missing the semicolon after the array declaration. Small point, though and nice to see that someone else does it the way I do it :)

Kilmazing · Accepted Answer · 2016-07-20 11:24:23Z

-2

Yes, you don't need the each because it is an ID and you can only have one ID on the page so each doesn't make sense.

var val = $('li.select2-search-choice').text(), project_bankers = [];
project_bankers.push(val);

answered Jul 20, 2016 at 11:24

Kilmazing

5267 silver badges14 bronze badges

2 Comments

Kilmazing Over a year ago

@eisbehr how come?

eisbehr Over a year ago

Because 1.) You didn't understand the question 2.) ID makes it faster 3.) Your code only works for one single entry, but therer are multiple 4.) If it WOULD be like you did, why use push instead of [val] ...

Collectives™ on Stack Overflow

Getting the value of div element using javascript and putting it in a array

7 Answers 7

1 Comment

Comments

Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related