Question

我有这个HTML代码，我想得到select2-search-choice div值的值

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

到目前为止，我所做的是这似乎有效，但我正在寻找一种更有效的方式来执行此代码

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

所以只是检查是否有更有效的方法来做到这一点？

Answer 1

您可以使用map()从jQuery对象中的一组元素生成数组：

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>

Answer 2

你可以更紧密地定位div：

project_bankers = [];

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

但我真的建议在列表末端而不是在jQuery末端加强代码。 - 例如 - 将类放在您想要定位的元素上（li中的div）。

Answer 3

你可以这样做：

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

如果您可以从选择器li中删除$('#s2id_project_banker_ids .select2-search-choice')，效果会更好。

Answer 4

不要使用find和子项选择，只需使用直接选择器直接选择元素：

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

或完全没有jQuery，简单的javascript。这也很有吸引力。

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

Answer 5

使用它可以使用的脚本

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

Answer 6

要求最有效的方法，您必须比较$.each，$.map和javascript提供的原生解决方案。

如果你真的想尽可能快，你应该使用普通的javascript，而不是jQuery。它可能不是mutch，但问题是最有效率。然后只有一种方式，纯粹的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.

Answer 7

是的，你不需要每个，因为它是一个ID，你只能在页面上有一个ID，所以每个都没有意义。

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

使用javascript获取div元素的值并将其放入数组中

7 个答案: